我可以在React中设置一个输入字段为只读，同时保持我的onChange函数吗?

Can I set an input field to readonly in React while keeping my onChange function?

本文关键字：只读 我的 函数 onChange 字段 设置 React 输入 一个 我可以      更新时间：2023-09-26

我有以下React渲染函数:

render: function() {
  return <input type="text" name="my-input-field" value={this.state.myObject} onChange={myFunction} />;
}

我想让这个输入字段在我检查过的一些条件下是只读的。我的理解是，如果我没有onChange函数，这个输入字段将默认为只读。简单地添加readOnly标签对我不起作用。

我如何重写这个，以便我可以稍后更改只读状态?

您可以使用扩展属性来做到这一点:

render: function() {
  var opts = {};
  if( /* here your condition */ ) {
      opts['readOnly'] = 'readOnly';
  }
  return (
    <input 
      type="text" 
      name="my-input-field" 
      value={this.state.myObject} 
      onChange={myFunction} 
      {...opts} 
    />
  );
}
相关文章：