Question

我的桌子上有一个颜色输入框。为了帮助格式化，我在'outside'上有一个彩色div，其中有一个'input：color'字段，设置为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}} />)
  }
]

失败的道具类型：你没有`onChange`处理程序

0 个答案: