我知道这里有些不对劲,但我看不见。在下面的代码中,输入框的事件处理程序正常工作,但是保存的代码有问题。当我单击该按钮时,我可以看到事件处理程序启动,然后整个应用程序重置。有什么想法吗?
import React, { Component } from 'react';
import InputForm from './InputForm';
class Parent extends Component {
constructor(props){
super(props);
this.state = {
value: ""
};
}
inputSavedHandler = (event) => {
console.log("input saved-------------------");
}
inputChangedHandler = (event) => {
this.setState({value: event.target.value});
}
render(){
return(
<div>
<InputForm
value={this.state.value}
changed={this.inputChangedHandler}
saved={this.inputSavedHandler}
/>
</div>
);
}
}
export default Parent;
import React, { Component } from 'react';
class InputForm extends Component {
render(){
return(
<div>
<form onSubmit={this.props.saved}>
<input type="text" className="input" value={this.props.value} onChange={this.props.changed} />
<input type="submit" value="Add" />
</form>
</div>
);
}
}
export default InputForm;
您需要在InputSavedHandler
中使用Event.PreventDefault
防止表单提交