使用自动建议渲染和显示选择答案

【问题标题】：Rendering and showing selections with autosuggest使用自动建议渲染和显示选择
【发布时间】：2020-11-03 03:16:19
【问题描述】：

我在一个组件上使用 react-autosuggest，它获取选项列表，呈现建议，然后当用户单击一个时将其保存到商店。我想打印所选值时遇到问题

然后是函数：

保存时：

      const onSave = () => {
    props.saveCarColor(value);
    console.log("value", value);
    getSuggestionValue(value);
    if (!props.carColor) {
      return toastError("Error");
    }
    props.history.push(getRoute(""));
  };

渲染建议：

const renderSuggestion = (item) => {
    return <span>{item.Value}</span>;
  };

获得建议：

    const getSuggestionValue = (selection) => {
    console.log("selection", selection);
return selection.Value;
  };

输入道具：

    const inputProps = {
    value,
    onChange: (event, { newValue }) => setValue(newValue),
  };

我声明了这个钩子来更新值：

  const [value, setValue] = useState("");

问题是，我将其正确保存到商店中，但在我保存后 onSave，它应该返回表单页面并显示选择的颜色，就像我在 getSuggestionValue 函数上所做的一样返回，但没有显示文本，我也没有收到任何错误，我的控制台日志打印了这个：

value BLACK
selection BLACK

【问题讨论】：

标签： reactjs redux react-redux autosuggest

【解决方案1】：

最后我使用另一个钩子来保存选定的颜色，所以现在我有了这个：

钩子：

const [value, setValue] = useState("");
  const [selected, setSelected] = useState(null);

输入属性：

const inputProps = {
    placeholder: "Ej: BLUE",
    value,
    onChange: (event, { newValue }) => setValue(newValue),
  };

渲染建议：

const renderSuggestion = (item) => {
    return <span>{item.Value}</span>;
  };

和获取建议值：

const getSuggestionValue = (selection) => {
    setSelected(selection.Value);
    return selection.Value;
  };

开启保存：

const onSave = () => {
if (!selected) {
  return toastError("");
}
props.saveCarColor(selected);


};

我就是这样解决的，希望对你有帮助！

【讨论】：