当 0 为 falsey ReactJS 时如何设置此输入值

Question

ReactJS 不喜欢 null 中的值<input>。

警告：valueprop oninput不应为空。考虑使用空字符串来清除组件或undefined用于不受控制的组件。

伟大的。我的数据库经常返回 null，因为尚未设置任何内容。

我在 ReactJS 应用程序中动态呈现输入字段。

value={this.state[row_array[0]] || ''} 

的值this.state[row_array[0]]有时为 0。我想将 0 放在文本字段中，但这计算结果为 false ......因此......空字符串''放在文本字段中。

问题是this.state[row_array[0]]可能是任何事情... 0 是大问题。

这有一些信息，但对我没有任何帮助https://github.com/facebook/react/issues/11417

关于如何设置它的任何想法value=0？

Answer 1

改用条件运算符，并检查是否为空：

value={this.state[row_array[0]] === null ? '' : this.state[row_array[0]]} 

以这种方式设置输入的值告诉 React 你想要控制组件。如果最初不受控制，这将导致警告 - 为避免该警告，请确保指定从一开始就控制输入。

现场演示：

value={this.state[row_array[0]] === null ? '' : this.state[row_array[0]]} 

const row_array = [0];
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 0: null };
    this.updateData = this.updateData.bind(this);
  }

  updateData (event) {
    console.log('updated');
    this.setState({ [event.target.name]: event.target.value });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input id={row_array[0]} className="data-input" name={row_array[0]} placeholder="" value={this.state[row_array[0]] === null ? '' : this.state[row_array[0]]} onChange={this.updateData} />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

如果它也可能是undefined，而不仅仅是null，那么也要检查一下：

value={this.state[row_array[0]] === null || this.state[row_array[0]] === undefined ? '' : this.state[row_array[0]]}