Question

就像您想到的最简单的情况一样，

我有一个选择，它根据应该更新选择本身的属性（其背景颜色）的值来更新参数

我正在使用React钩子和样式化组件来实现这一目标。

我希望Redux将来能够将其绑定成一堆不变的颜色。

问题很简单，为什么我不能更新状态，我试图打印它，它始终是一个空字符串。

这是我的样式文件

let currentColor = '';

const SelectColor = styled.div`
  select{
    background-color: ${currentColor || 'black'};
  }
  .label{
    width: 150px;
    font-size: 14px;
    text-align: left;
    margin-left: 6px;
  }
`;

由于我无法掌握的原因，这是不更新selectValue的组件（我试图以控制台方式对其进行记录，并且它始终返回空字符串）。我已经检查了几次文档，看来它应该以这种方式更新，所以我一无所知...

const SelectComponent = ({
  disabled,
  colorList,
  label,
  onSelect,
  ...restProps
}) => {
  const [selectValue, setSelectValue] = useState('');

  const handleChange = useCallback(
    (e) => {
      setSelectValue(e.target.value);
      console.log(selectValue);
    },colorList
  );

  return (
    <SelectColor>
      <span className='label'>{label}</span>
      <select onChange={e=>handleChange(e)}>
        {
          colorList.map(color =>
          <option key={color} value={color}>{color}</option>)
        };
      </select>
    </SelectColor>
  );
};

SelectComponent.propTypes = {
  disabled: PropTypes.bool,
  hourValue: PropTypes.number,
  projectName: PropTypes.string,
};


export default SelectComponent;

Answer 1

您的handlechange函数对我来说有点奇怪，因为该函数本身不接受变量。尝试这样写

 const handlestring = (e) => {
   setSelectedValue(e.target.value)
}

Answer 2

这里有一些修复，请检查代码中的注释：

// SelectComponent
const SelectComponent = ({
  disabled,
  colorList,
  label,
  onSelect,
  ...restProps
}) => {
  const [selectValue, setSelectValue] = useState('');

  // Make this a function, not an arrow function. 
  // It's unnecessary in this case due to not needing a binding
  function handleChange(e) {
    setSelectValue(e.target.value);
  }

  // send currentColor as a prop to your styled component and remove 
  // the arrow onChange, not needed.
  return (
    <SelectColor currentColor={selectValue}>
      <span className='label'>{label}</span>
      <select onChange={handleChange}>
        {
          colorList.map(color =>
          <option key={color} value={color}>{color}</option>)
        };
      </select>
    </SelectColor>
  );
};

SelectComponent.propTypes = {
  disabled: PropTypes.bool,
  hourValue: PropTypes.number,
  projectName: PropTypes.string,
};


export default SelectComponent;

// Your styled components receives now a prop with the name currentColor.
// Use it inside the interpolation string ${} and set the value
const SelectColor = styled.div`
  select{
    background-color: ${(props) => props.currentColor || 'black'};
  }
  .label{
    width: 150px;
    font-size: 14px;
    text-align: left;
    margin-left: 6px;
  }
`;

希望这会有所帮助！询问您有什么需要，如果有空我会帮忙！

我无法使用React挂钩更新我的字符串值

2 个答案: