文本溢出问题的反应

Question

当我试图输入更多文本时，文本溢出并出现在水平线上。这里的行应根据文本自动调整

import React, { Component } from 'react';

export default class App extends Component {
    constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
    return (
        <div>
            <form onSubmit  = {this.handleSubmit}>
                <input onChange={this.handleChange} value={this.state.text} />
            </form>
            <div>
                <TodoList items={this.state.items} />
            </div>
        </div>
    );
}

handleChange(e) {
    this.setState({ text: e.target.value });
}

handleSubmit(e) {
    e.preventDefault();

    if (!this.state.text.length) {
        return;
    }

    const newItem = {
        text: this.state.text,
    };
    this.setState(prevState => ({
        items: prevState.items.concat(newItem),
        text: ''
    }));
}

class TodoList extends React.Component {
    render() {
        return (
            <div>
                {this.props.items.map(item => (
                    <h3 key={item.id}>{item.text}</h3>
                ))}
            </div>  
        );
    }
}

任何帮助将不胜感激，谢谢。

Answer 1

我认为代码中存在一个小错误，您需要适当地声明输入标记的值。以下是您可以尝试的代码：

import React, { Component } from 'react';

 export default class App extends Component {
               constructor(props) {
               super(props);
               this.state = { items: [], text: '' };
               this.handleChange = this.handleChange.bind(this);
               this.handleSubmit = this.handleSubmit.bind(this);
       }

           render() {
           return (
           <div>
           <form onSubmit  = {this.handleSubmit}>
           <input 
            onChange={this.handleChange}
            value={this.state.text} />
           </form>
           <div>
              <TodoList items={this.state.items} />
           </div>
           </div>
    );
    }

            handleChange(e) {
                       this.setState({ text: e.target.value });
            }

            handleSubmit(e) {
                        e.preventDefault();
                       if (!this.state.text.length) {
                  return;
          }
            const newItem = {
             text: this.state.text,

          };
            this.setState(prevState => ({
             items: prevState.items.concat(newItem),
           text: ''
    }));
    } }

         class TodoList extends React.Component { render() { return (

      <div>

             {this.props.items.map(item => (
              <h3 key={item.id} className="text-list">{item.text}</h3>
           ))}

           </div>  
);
}

}

render(<App />, document.getElementById('root'));

这是它的UPDATED工作演示：https://react-guerkm.stackblitz.io/

您可以将以下给出的CSS添加到className：

.text-list{
  color: aqua;
  width: 50%;
  overflow-wrap: break-word;
}