05.React.Form表单(二)

github源码地址

根据上一篇文章,我们可以了解到在React中如何处理鼠标点击表单的按钮。现在我们将会讲述表单中更普遍的东西:文本输入。

我们继续使用之前的sign-up-app,将其改造成允许用户记录注册用户的用户名列表。当用户在输入框中输入用户名后,单击提交按钮,页面会自动保存该注册名到姓名列表中并显示:

sign-up-app.jpeg


通过refs获取用户输入
当用户点击提交按钮后,我们想要读取用户在输入框中输入的内容。一个通常的方法是:当用户点击提交按钮后,我们找到该输入框的DOM元素,然后在这个DOM元素中获取数据。
现在先让我们新建一个组件BasicInput,里面包含了基本的表单结构:输入框,提交按钮。
BasicInput.js:

render() {
    return (
      <div>
        <h1>注册表</h1>
        <form onSubmit={this.onFormSubmit}>
          <input 
            type="text"
            placeholder="用户名"
            ref="name"/>
          
          <input type="submit" value="提交"/>
        </form>
      </div>
    )
  }

这个例子和简单,里面包好了一个form元素,该元素下有两个子元素,分别是input的输入框和一个submit的提交按钮。
这里有两个地方值得注意。
其一:我们给form元素添加了一个onSubmitevent handler
其二:我们给input输入框添加个ref属性,其值为name

为什么要在form上面使用onSubmit,而不是在提交按钮上使用onClick呢?原因是当时用了onSubmit,用户不仅可以点击提交按钮对文本进行提交,也可以在表单的范围内直接按回车(enter/ return)来提交文本。这比仅仅点击提交来说显得更加用户友好。

但是,由于我们的event handler是绑定在form上的,这样,它的event对象相较于上一篇文章的例子中显得不那么有用了。在上一篇文章的例子中,我们可以使用event.target来获取元素目标(button),及其值。而在这个例子中,我们关心的是input输入框的值。在这里,如果通过formevent对象,那么要用event.target指向表单,然后在从其子元素中找到input,然后再获取输入值。显然这比较麻烦。现在有一个更简单的方式来获取input的值。

在React中,如果想要获取组件中的DOM元素,我们可以使用refs(references)。从代码中我们可以看到,我们给input设置了一个ref="name",然后在onSubmit通过this.refs.name来获取input元素。这样就可以直接获取值了:

  onFormSubmit = (e) => {
    e.preventDefault()
    console.log(this.refs.name.value)
  }

这里的e.preventDefault()和原生DOM一样是为了阻止默认事件。
通过 this.refs.name我们就可以获得input输入框的数据了:

output.jpeg


使用用户输入
现在我们可以获取用户输入的用户名了。现在我们要用使用这些信息来改变应用的state和UI。
这个例子的目标是当用户输入注册名并提交后,显示在页面的注册名列表中。我们要用一个存放用户名的数组给state,然后由render()将其渲染出来。
当应用初次加载的时候,这个用户名数组是空的。每当用户提交一个名字,则将这个名字存入数组中。现在让我们按需求来改造一下组件:

export default class BasicInput extends Component {

  constructor(props) {
    super(props);
    this.state = {
      names: []
    };
  }

  onFormSubmit = (e) => {
    e.preventDefault()
    const name = this.refs.name.value
    const names = [...this.state.names, name]
    this.setState({
      names: names
    });
    this.refs.name.value = ''
  }

  render() {
    return (
      <div>
        <h1>注册表</h1>
        <form onSubmit={this.onFormSubmit}>
          <input 
            type="text"
            placeholder="用户名"
            ref="name"/>
          
          <input type="submit" value="提交"/>
        </form>
        <div>
          <h3>名字</h3>
          <ul>
            {
              this.state.names.map((name, index) => {
                return <li key={index.toString()}>{name}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

其实只要看过前面的几篇文章,这段代码是不难理解的。
对于onFormSubmit的思路步骤如下:

  1. 新建一个变量来存储拷贝后的当前statenames(immutable)
  2. 在数组中添加新的用户名
  3. 使用this.setState()来更新状态并重新渲染
  4. 清除用户输入的数据,体现更好的用户友好性。

受控组件和非受控组件uncontrolled components, controlled components

之前的例子,我们使用了refs来直接获取DOM元素,并执行相关的操作。这是一个办法,但是这样也让我们体会不到使用React的好处了。
使用React,我们可以不必修改DOM去匹配应用的状态。我们应该把注意力放在改变state,然后通过state的变化导致UI的变化。而且通过修改state的方式,使得渲染的变化变得更加可预测。

之前例子的方式(使用refs)被称之为“非受控组件”(uncontrolled component)。意思就是React不会“控制”(control)组件是如何渲染的。
如果让React来控制组件,就称之为受控组件controlled component

将非受控组件转化成受控组件的步骤:

  1. 使用state存储value
  2. 在一个地方使用value prop,其值为state中的value
  3. 添加 onChange来更新state

代码如下:

export default class BasicInput extends Component {

  constructor(props) {
    super(props);
    this.state = {
      names: [],
      name: ''
    };
  }

  onNameChange = (e) => {
    this.setState({
      name: e.target.value
    });
  }

  onFormSubmit = (e) => {
    e.preventDefault()
    const name = this.state.name
    const names = [...this.state.names, name]
    this.setState({
      names: names
    });
    this.state.name = ''
  }

  render() {
    return (
      <div>
        <h1>注册表</h1>
        <form onSubmit={this.onFormSubmit}>
          <input 
            type="text"
            placeholder="用户名"
            value={this.state.name}
            onChange={this.onNameChange}/>
          
          <input type="submit" value="提交"/>
        </form>
        <div>
          <h3>名字</h3>
          <ul>
            {
              this.state.names.map((name, index) => {
                return <li key={index.toString()}>{name}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

这样就修改完成了,运行结果和之前一致。

推荐阅读更多精彩内容