我正在一个简单的待办事项应用程序上进行练习,用户可以在字段中输入他们的待办事项,然后点击提交以查看其添加到待办事项列表中。
一旦使用“this.setState({newTodo: ''})”提交表单,我就成功地清除了状态(再次点击提交将添加一个空的待办事项);
但是,输入字段中的文本不会被清除。
const TodoItem = ({ text }) => <li>{text}</li>;
class App extends Component {
constructor(props) {
super(props);
this.state = {
todos: ['walk dog', 'feed cat'],
newTodo: ''
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const todos = [...this.state.todos, this.state.newTodo];
this.setState({ todos, newTodo: '' });
}
render() {
const { newTodo } = this.state;
const todos = this.state.todos.map((todo, index) => <TodoItem key={index} text={todo} />);
return (
<div className="App">
<form onSubmit={this.handleSubmit}>
<h1>Simple Todo App</h1>
<input
type="text"
name="newTodo"
value={this.newTodo}
onChange={e => this.setState({ [e.target.name]: e.target.value })}
/>
<ol>
{todos}
</ol>
<button>SAVE</button>
</form>
</div>
);
}
}
export default App;
感谢您的任何帮助。
最佳答案
this.newTodo
未定义,请使用 this.state.newTodo
代替 od this.newTodo
:
<input
type="text"
name="newTodo"
value={this.state.newTodo}
onChange={e => this.setState({ [e.target.name]: e.target.value })}
/>
或者:
const { newTodo } = this.state;
<input
type="text"
name="newTodo"
value={newTodo}
onChange={e => this.setState({ [e.target.name]: e.target.value })}
/>
关于javascript - 在 React 中提交表单后,状态已清除,但输入字段文本未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48435097/