javascript - 当 0 为 false 时如何设置此输入值 ReactJS

Question

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

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

太棒了。我的数据库经常返回 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

改用条件运算符，并检查 null:

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

以这种方式设置输入的值告诉 React 您想要控制该组件。如果最初不受控制，这将导致警告 - 为了避免该警告，请确保指定输入为 controlled from the start .

现场演示:

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')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果它也可能是未定义，而不仅仅是null，那么也请检查一下:

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