在保持onChange功能的同时,我可以在React中将输入字段设置为只读吗？

Question

我有以下React渲染功能:

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

我希望在我检查过的某些条件下,只读取此输入字段.我的理解是,如果我没有onChange函数,这个输入字段将默认为readonly.简单地添加readOnly标签对我来说没有用.

我怎样才能重写这个以便以后可以改变只读状态？

Answer 1

您可以使用spread属性来执行此操作:

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} 
    />
  );
}