当 0 为 false ReactJS 时如何设置此输入值答案

【问题标题】：How to set this input value when 0 is falsey ReactJS当 0 为 false ReactJS 时如何设置此输入值
【发布时间】：2020-01-02 01:30:50
【问题描述】：

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

警告：input 上的 value 属性不应为空。考虑使用一个空字符串清除组件或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 的任何想法？

【问题讨论】：

为什么不直接做value={this.state[row_array[0]] || '0'} ？
如果它为空我不想插入一个'0'
@slindsey3000 如果您尝试检查 undefined 或 null 会怎样：this.state[row_array[0]] === null || this.state[row_array[0]] === undefined ? '' : this.state[row_array[0]]
@slindsey3000 如果您还没有启用它，我不会担心，因为您应该能够编写 ?? 使用当前功能执行的代码 - 所以可能不值得安装一个插件。我相信做 this.state[row_array[0]] === null || this.state[row_array[0]] === undefined ? '' : this.state[row_array[0]] 会在某种程度上等同于 ?? 所做的事情。
哦，快点@NickParsons 成功了。用这个玩了 2 个小时！祝福你！

标签： javascript reactjs

【解决方案1】：

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

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>

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

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

【讨论】：

警告：组件正在将 undefined 类型的不受控输入更改为受控。输入元素不应从不受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。
我首先尝试了这个。但这会导致上面的错误
为避免该警告，您应该make the input controlled - 确保 React 始终处理更改，以便它们进入状态。例如value={this.state.value} onChange={this.handleChange} 和handleChange(event) { this.setState({value: event.target.value}); }
我做了一个实时的 sn-p，它似乎工作正常，没有任何警告
我以为你说它只能是数字、字符串或null。如果它也可能是undefined，那么你也必须检查它

【解决方案2】：

当使用 if 或三元运算符询问变量时，它被评估为非 null 且非未定义。

你可以试试。

class X extends React.Component {
    state = {};
    render (){
      const xdata = this.state[row_array[0]];
      const value = xdata ? xdata : '';
      return (
        <input type="text" value={value} />
      )
    }
}

【讨论】：