反応でのテキストオーバーフローの問題

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')); 

は、更新作業のデモです：https://react-guerkm.stackblitz.io/

あなたはクラス名に下記のCSSを追加することができます。

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