输入值在 React 组件中是只读的

Posted 2023-02-22

【中文标题】输入值在 React 组件中是只读的

【英文标题】：Input value is read only in React component

【发布时间】：2020-04-03 06:01:37

【问题描述】：

我有多个颜色输入，它们以独特的颜色显示。他们从一个嵌套对象的助手那里获得他们的价值。当我尝试更新值时，什么也没有发生。我的最终目标是更改颜色输入，并将颜色应用于 css 变量，以便更改特定的语法突出显示颜色。

这是项目的codesandbox。

【问题讨论】：

请不要只链接到您的代码。尝试将解决问题所需的部分直接嵌入到问题中。有关如何改进问题的更多信息，请参阅How to ask 文章。

【参考方案1】：

检查这里 https://codesandbox.io/s/react-heykm

像这样改变HexInput Onchange方法：

          onChange= e => props.onChange(e, props.label)

像这样更改 ColorPicker 道具

         <ColorPicker
              key=color
              label=color
              value=colorVal[color]
              onChange=onColorChange
            />

【参考方案2】：

只需进行以下更改：

在 ColorPickerSection.jsx 中

function ColorPickerSection() 
  const [colorVal, setColorVal] = useState(colors);

  const onColorChange = (e, colorValKey) => 
    setColorVal(
      ...colors,
      [colorValKey]: e.target.value
    );
  ;

  console.log(colorVal);

  return (
    <div>
      Object.keys(colorSelect).map(groupName => 
        return (
          <div>
            <GroupName>groupName</GroupName>
            Object.keys(colorSelect[groupName]).map(color => 
              return (
                <ColorPicker
                  key=color
                  label=color
                  value=colorVal[color]
                  onColorChange=e => onColorChange(e, color)
                />
              );
            )
          </div>
        );
      )
    </div>
  );

在 ColorPicker.jsx 中

function ColorPicker(props) 
  return (
    <ColorPickerContainer>
      <p>props.label</p>
      <ColorSwatch
        type="color"
        value=props.value
        onChange=props.onColorChange
      />
      <HexInput
        type="text"
        value=props.value
        onChange=props.onColorChange
      />
    </ColorPickerContainer>
  );

【参考方案3】：

ColorPicker.js - 在两个地方更改 ColorSwatch 和 HexInput 组件。

来自

onChange=props.onColorChange

到

onChange=props.onChange

完成 ColorPicker.js

return (
    <ColorPickerContainer>
      <p>props.label</p>
      <ColorSwatch type="color" value=props.value onChange=props.onChange />
      <HexInput
        type="text"
        value=props.value
        onChange=props.onChange
      />
    </ColorPickerContainer>
  );