React待办事项列表显示待办事项onChange,而不是提交
问题描述:
我对React有点新鲜,并且所有新的编程工作都在构建待办事项应用程序。除了一个问题之外,一切似乎都正常工作:当我在输入字段中输入待办事项并单击“提交”时,待办事项会被推入我的数组中,但不会立即显示。只有当我更改显示待办事项的输入内的文本时。我猜这与handleChange函数发生的渲染有关,而不是handleSubmit函数。任何帮助将不胜感激。React待办事项列表显示待办事项onChange,而不是提交
这里是我的AddTodo组件
import React, { Component } from 'react';
import App from "./App"
import List from "./List"
class AddTodo extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
array: []
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
var array = this.state.array
array.push(this.state.value);
console.log(array)
}
render() {
return (
<div>
<form>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input onClick={this.handleSubmit} type="submit" value="Submit" />
</form>
<List array={this.state.array}/>
</div>
);
}
}
而我的列表组件
import React, { Component } from 'react';
class List extends Component{
render(){
return(
<div>
{
this.props.array.map(function(item, index){
return <li key={index}>{item}</li>
})
}
</div>
)
}
}
export default List;
答
默认情况下,调用的setState()调用渲染()函数。 更多的信息:ReactJS - Does render get called any time "setState" is called?
谢谢!这清理了我的东西! –