Form高级
把表单中的每个元素做成受控组件,然后把值交给父组件管理就可以了。
示例:
import React from 'react';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const { children, onSubmit } = this.props;
return (
<form onSubmit={(e) => {
e.preventDefault();
onSubmit(this.state);
}}>
{
React.Children.map(children, child => {
return React.cloneElement(child, { name: child.props.name, onChange: e => this.setState({ [child.props.name]: e.target.value }) })
})
}
</form>
);
}
}
export default Form;