ユーザが空白を入力したときに水平線が作成されるのはなぜですか？

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

あなたのコードでは、空白を入力としても常に<h3>要素が追加されます。

おそらく、CSSスタイリングが h3に適用されているため、横線が表示されている可能性があります。

あなたができることは、ユーザーが空白データを挿入できないようにすることです。一つのアプローチは、長さのチェックを行う前にtrim()、ユーザの入力にある：

// In handleSubmit() 
if (!this.state.text.trim().length) { 
    return; 
} 

今だけ空白で入力が0の長さになりますので、それ以前のhandleSubmit()を終了します。

---

import React, { Component } from 'react' 
 

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

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

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

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

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

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