Reactjs 在React中填充受控输入

我目前正在用React构建一个表单，我想知道从对象预填充字段的最佳实践是什么

import React, { Component } from 'react'

class EditResourceForm extends Component {
  constructor (props) {
    super(props)

    this.state = {
      resource: props.resource
    }
  }

  handleFieldChanged (e) {
    // update state
  }

  render () {
    return (
      <input
        type="text"
        value={this.state.resource.email}
        onChange={::this.handleFieldChanged} />
    )
  }
}

---

哪里是提供空字符串作为

null

值回退的适当位置？这应该在父组件的构造函数方法中完成吗？是否有一种方法可以避免为每个可能具有

null

值的属性显式执行此操作？

您可以使用

defaultValue

属性设置初始值

<input
  type="text"
  defaultValue={this.state.resource.email ? this.state.resource.email : ""}
  onChange={this.handleFieldChanged} />

---

查看这篇关于受控组件和非受控组件的优秀文档：

我能想到的最简单的方法：

constructor (props) {
    super(props)

    this.state = {
      resource: props.resource || {}
    }
  }

据我所知，没有办法自动设置这些值，使它们不为null，但如果有，我不建议这样做，好的代码是不言自明的

编辑1

如果这仍然不够，那么另一个选项是直接使用react的文档：

因为一个不受控制的组件在DOM中保留了真相的来源， 有时，集成React和非React代码更容易 使用非受控组件。如果需要，代码也可以稍微少一些 你想变得又快又脏。否则，您通常应该使用 受控组件

编辑2

文档中提供的代码似乎有点复杂，因此下面是我将如何执行的一段代码：

<input type="text" onChange={(e, val) => {this.setState({email: val})}} />

{this.setState（{email:val}}}/>

完全按照现在的方式执行，只需将

resource:props.resource

设置为

resource:props.resource |{}

，这样当props.resource为空时不会抛出错误。这就是我当前正在做的事情（但是，如果

null

，则将资源对象的各个属性设置为空字符串）。使用较长的表单会变得非常单调乏味，因为我有许多必须显式提供的值。如果确实单调乏味，您可以使用不受控制的组件，并仅在值更改（）时更新状态，但请注意，阅读此页，您会意识到它可能并不总是最好的主意。我相信

defaultValue

仅适用于非受控输入，而我的表单需要受控组件。

<input type="text" onChange={(e, val) => {this.setState({email: val})}} />