Javascript 当用户输入空白时，为什么要创建水平线？

这是我的密码。当我试图运行它时，对于输入为空的空间，它会创建一条水平线

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

}

import React，{Component}来自'React'；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={items:[]，文本：'}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
} 
render（）{
返回(
);
}
手变（e）{
this.setState（{text:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
if（！this.state.text.length）{
返回；
}
常量newItem={
text:this.state.text，
};
this.setState（prevState=>({
项目：prevState.items.concat（新项目），
文本：“”
}));
}
}
类TodoList扩展了React.Component{
render（）{
返回(
{this.props.items.map（item=>(
{item.text}
))}
);
}
}

您的代码将始终附加

元素，即使输入为空白

您看到的是一条水平线，这可能是由于应用于

h3

您所能做的是防止用户插入空白数据。一种方法是在进行长度检查之前，先对用户输入进行

trim（）

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

现在，只有空格的输入将变为0长度，因此在前面退出
handleSubmit（）



import React，{Component}来自“React”
类TodoList扩展了React.Component{
render（）{
返回(
{this.props.items.map（item=>{item.text}}
);
}
}
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={items:[]，文本：'}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
this.setState（{text:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
如果（！this.state.text.trim（）.length）{
返回；
}
常量newItem={
text:this.state.text，
};
this.setState（prevState=>({
项目：prevState.items.concat（新项目），
文本：“”
}));
}
render（）{
返回(
)
}
}
您缺少一个
}
此处：
值={this.state.text/>
您还可以建议我，当我键入更多文本时，水平线也应根据它进行调整。目前它不起作用