react受控组件操作表单

1.给每个表单元素添加一个name属性

2.name属性的值要和state中的状态值保持一致

3.使用同一个事件处理程序

class Hello extends React.Component {
  state = {
    txt: '',
    content:'',
    addresss:'zk',
    isChecked:true
  }
handleForm=(e)=>{
    const target=e.target
判断事件类型，如果是checkbox返回checked值，不是返回文本框的value值
    const value=target.type=='checkbox'?target.checked:target.value;
获取文本框的name值
    const name=target.name
    this.setState({
      [name]:value
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.txt}</p>
        <p>{this.state.content}</p>
        <p>{this.state.address}</p>
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br/>
        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        {/* 下拉框 */}
        <select name="address" value={this.state.addresss} onChange={this.handleForm}>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="zk">周口</option>
        </select>
        {/* 复选框 */}
        <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}/>
      </div>
    )
  }

}
ReactDOM.render(<Hello />, document.getElementById('root'))

 

来源：CSDN

作者：追逐春天的大孩子

链接：https://blog.csdn.net/weixin_43709908/article/details/103465124