React 受控组件

React 受控组件

复习 2019-1-22

1.受控组件：在原生的HTML中，input（type=‘text’） textarea select 三个元素的内部的属性可以随着用户的输入变化。

2.react 中使用 state 控制属性的变化，将原生的受控组件和 react 中 state 结合。

class Text extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }
  
  handleChange = (e) => {
    let text = e.target.value.trim();
    this.setState({
      value: text
    });
  } 
  
  handleSubmit = (e) => {
    e.preventDefault();
    seafile.addComment(this.state.value).then((res) => {
      console.log(res.data.success);
    })
  }
  
  render() {
    <form>
      <input type="text" value={this.state.value} onChange={this.handleChange}/>
      <button onClick={this.hanldeSubmit}>Submit</button>
    </form>
  }
}

使用受控组件可以过滤用户输入，在handlechange 函数中，设置正则表达式或者简单的trim函数可以过滤部分输入。

<input type='file' />是非受控组件。将本地的n个文件上传到服务器中。

当界面上有多个input时，可以只写一个函数，handleinputChange 处理所有的input输入。通过 event.target.type 或者 event.target.name 进行选择，判断是哪个组件发生输入并进行不同的界面操作。

<input type="textarea" name="comment" onChange="handleInputChange"/>
<input type="checkoutbox" name="comment-number" onChange="handleInputChange"/>

handleInputChange = (e) => {
  let value = e.target.type === 'textarea' ? e.target.value : e.target.checked;
  const name = e.target.name;
  this.setState({
    //
  });
}

受控组件使用很多会形成很多的处理函数（2n）根据场合使用受控组件和非受控组件。