在React中,可以通过在组件的state中定义对应的值,并将其绑定到表单控件的value属性上,从而实现自动赋值。

首先,在Form组件的构造函数中定义state,用于保存表单的值。例如:

constructor(props) {
  super(props);
  this.state = {
    name: '',
    age: '',
    email: ''
  };
}

接下来,在表单的每个输入框中,将其value属性绑定到对应的state值上,并添加onChange事件处理函数来更新state的值。例如:

<input type="text" value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />
<input type="text" value={this.state.age} onChange={e => this.setState({ age: e.target.value })} />
<input type="text" value={this.state.email} onChange={e => this.setState({ email: e.target.value })} />

这样,当用户在输入框中输入内容时,state的值会被更新,从而实现了自动赋值。

另外,如果有初始值需要自动赋值到输入框中,可以在组件挂载时通过setState方法进行赋值。例如:

componentDidMount() {
  this.setState({
    name: 'John',
    age: '25',
    email: 'john@example.com'
  });
}

这样,组件挂载后,输入框中会自动显示初始值

ReactFC 的 Form组件怎么自动赋值到对应里的框

原文地址: https://www.cveoy.top/t/topic/iEye 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录