on更改不触发，想要更新状态

Question

const [firstName, setFirstname] = useState('');
<Textbox
inputId="firstName"
labelName="Given Name"
type="text"
value={firstName}
onChange={setFirstname(event.target.value)}
/>

想要更新change event上的状态。它不会触发。任何想法是为什么不呢？我也试过这个。而且它不会触发handleChange.

`onChange={(e) => handleChange(e)}`
...
const handleChange = (e) => {
console.log(e);
}

Answer 1

onChange属性类型为函数，将onChange作为函数来解决问题

<Textbox
inputId="firstName"
labelName="Given Name"
type="text"
value={firstName}
onChange={event => setFirstname(event.target.value)}
/>

Answer 2

请在下面找到代码片段，确保将您分配给onChange的方法绑定，如以下代码中的handleChange：

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<NameForm />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 3

解决了它，我遇到的问题我正在传递更改Textbox，其中也包含一个标签。 因此必须将更改道具作为函数传递

例如

文本框组件：

<label>{labelName}</label>
<input type="text" onChange={onChange} />

父母：

<Textbox onChange={e => setFirstname(e.target.value)}

Answer 4

不需要对名字、中间名、姓氏使用多个useState

这是在钩子中更新对象的方法

1-更新钩子中的对象

2-重复使用多个输入处理

function App() {
const [name, setName] = useState({
firstName:'',
surname:''
});
const handleName=e=>{
setName({...name, [e.target.name]: e.target.value})
}
return (
<div className="App">
<h1>{name.firstName}</h1>
<h1>{name.surname}</h1>
<h2>Start editing to see some magic happen!</h2>
<input
type="text"
inputId="firstName"
name="firstName"
value={name.firstName}
onChange={handleName}
/>
<input
type="text"
inputId="surname"
name="surname"
value={name.surname}
onChange={handleName}
/>
</div>
);
}