2

我的表格中有一个颜色输入框。为了帮助格式化，我在“外部”上有一个彩色 div，里面有一个“输入：颜色”字段，设置为display:none. 单击外部 div 会触发对内部输入的单击。

总体而言，该系统运行良好。除了它触发此错误：

警告：失败的道具类型：您在value没有处理程序的情况下为表单字段提供了道具onChange。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultValue. 否则，设置onChange或readOnly。

我有一个onChange和defaultValue一套....知道为什么会这样吗？

renderColorEditable(cellInfo) {
  return (
    <div
      className="colorBox"
      style={{backgroundColor:cellInfo.value}}
      onClick={(event) => {
        if(event.target.querySelector('input')){
          event.target.querySelector('input').click();
        }
      }}>
      <input
        style={{display: 'none'}}
        type="color"
        onChange={e => {
          const data = [...this.state.data];
          data[cellInfo.index][cellInfo.column.id] = e.target.value;
          this.setState({ data });
        }}
        defaultValue={cellInfo.value}
      />
    </div>
  );
}

const columns = [
  {
    Header: '',
    accessor: 'color',
    sortable: false,
    width: 30,
    filterable:false,
    resizable: false,
    Cell: this.state.editing ? this.renderColorEditable : (cellInfo)=>(<div className="colorBox" style={{backgroundColor:cellInfo.value}} />)
  }
]
4

0 回答 0