在 react docs forms section下面是使用类组件的示例:
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
考虑到 Hooks 只能在 React 函数组件或自定义 React Hook 函数中调用,有没有办法使用 hooks 来代替?
最佳答案
您可以通过不使用 useCallback Hook 来稍微清理@adam 的最终解决方案,而只需将 useState Hook 用作受控组件。
const MyComponent = () => {
const [inputs, setInputs] = useState({});
const handleChange = e => setInputs(prevState => ({ ...prevState, [e.target.name]: e.target.value }));
return (
<>
<input name="field1" value={inputs.field1 || ''} onChange={handleChange} />
<input name="field2" value={inputs.field2 || ''} onChange={handleChange} />
</>
)
}
关于javascript - react 钩子(Hook) : handle multiple inputs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63710791/