Question

我目前正在使用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} />
    )
  }
}

我在this.state.resource.email为null或未定义时遇到问题，因为React不希望我将这些值作为值提供给受控组件：

Warning: `value` prop on `input` should not be null. Consider using the   
empty string to clear the component or `undefined` for uncontrolled    
components.

提供空字符串作为null值后备的适当位置在哪里？这应该在父组件的构造函数方法中完成吗？有没有办法避免必须为可能具有null值的每个属性显式执行此操作？

Answer 1

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

constructor (props) {
    super(props)

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

据我所知，没有办法自动设置这个值，所以它们不是null，但是如果有的话，我不推荐它，好的代码是自我解释的。

编辑1

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

由于不受控制的组件在DOM中保留了真实来源，有时更容易集成React和非React代码使用不受控制的组件。如果，它也可以稍微减少代码你想要快速和肮脏。否则，你应该经常使用受控组件。

编辑2

文档中提供的代码似乎有点复杂，所以这里有一个我将如何做的片段：

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

Answer 2

您可以使用defaultValue道具来设置初始值。

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

查看有关受控组件和非受控组件的优秀文档：https://facebook.github.io/react/docs/uncontrolled-components.html

在React中填充受控输入

2 个答案: