白小宇
白小宇

React学习：表单(Forms)

受控组件(Controlled Components)

  • 在 HTML 中，表单元素如 < input>，< textarea> 和 < select> 表单元素通常保持自己的状态，并根据用户输入进行更新。
  • 在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新。

我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”。

一、用value实现受控组件

总的来说，< input type=”text”>， < textarea> 和 < select> 工作方式都类似 —— 它们都接受一个 value 属性可以用来实现一个受控组件。

1、< input type=”text”/>

看下面例子：
由于 value 属性设置在我们的表单元素上，显示的值总是 this.state.value，以满足 state 状态的同一数据理念。 handleChange 在每次敲击键盘时运行，以更新 React state(状态)，显示的值将更新为用户的输入。

class NameForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {value:''};
  }
  handleChange = (e) => {
    this.setState({
      value: e.target.value
    });
    //这样是错的：this.setState(() => ({value:e.target.value }));
  }
  handleSubmit = (e) => {
    alert('input value is : ' + this.state.value);
    e.preventDefault();
  }
  render(){
    return(
      
this.handleSubmit}>
        
        type='submit' value='submit'/>
      

    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

输出：
这里写图片描述
输入信息，点击’submit’
这里写图片描述

对于受控组件来说，每一次 state(状态) 变化都会伴有相关联的处理函数。这使得可以直接修改或验证用户的输入。比如，如果我们希望强制 name 的输入都是大写字母，可以这样来写 handleChange 方法：

//效果：在键盘输入任意字母，input里显示出来的是大写字母
handleChange(e) {
  this.setState({value: e.target.value.toUpperCase()});
}

2、< textare/>

在 HTML 中，< textarea> 元素通过它的子节点定义了它的文本值：

在 React 中，< textarea> 的赋值使用 value 属性替代。这样一来，表单中 < textarea> 的书写方式接近于单行文本输入框 ：

例：

class EssayForm extends React.Component {
 constructor(props){
    super(props);
    this.state = {
      value:'Please write an essay'
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this); 
  }
  handleChange(e){
    this.setState({
      value: e.target.value 
    });
  }
  handleSubmit(e){
    alert('input value is : ' + this.state.value);
    e.preventDefault();
  }
  render(){
    return(
      
this.handleSubmit}>