Form
文章目录

React: Form/Inputs

一般h5的input自己会管理自己的输入

Controlled Components

实际上就是这么几个要点:

  1. 给value绑定一个state的值, state.value最好
  2. 给onChange绑定一个事件, 修改state.value
  3. 在constructor里面绑定函数的this

React也可以在渲染的时候绑定事件, 事件里面就可以进行各种操作, 比如转换所有文本为uppercase之类的。另外修改了文本之后也可以立刻反应/渲染到元素之上。

类似于将JS端的onChange放到了Server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

  constructor(props) {
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    //通过变量event.target.value获取输入的值并且设置state
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>  //绑定onSubmit
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} /> //绑定onChange
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }

The textarea Tag

有一点和H5不同的地方, React端的value的设置可以通过一个attr:

H5:

1
2
3
<textarea>
  Hello there, this is some text in a text area
</textarea>

React:

1
<textarea value={this.state.value} onChange={this.handleChange} />

The select Tag

设置selected的option的时候也略有不同, 同样可以通过value这个attr设置

H5:

1
2
3
4
5
6
<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

React:

1
2
3
4
5
6
 <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>

关于使用Value=Null来允许用户输入

可以看到, 将input的value设置为this.state.value就是为了阻止用户自由输入, 但是有些时候要将controlled Input的权限放开, 因此我们可以将value设置为null或者undefined来开启用户自由输入.

1
2
3
4
5
6
ReactDOM.render(<input value="hi" />, mountNode);

// allow user input after 1sec
setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

关于Controlled Components 和 UnControlled Components

缩写成CC/UC

CC写起来其实挺麻烦, 因为每个elem都要写个onChange.
其实也可以使用UC

使用UC的例子:

  1. 使用一个ref将输入的值赋给多个参数, 比如this.xxx
  2. submit的时候对this.xxx进行各种validation以及处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

 render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }