显示选定选项的 div 部分 - 无状态组件答案

【问题标题】：Show A Div Section From A Selected Option - Stateless Components显示选定选项的 div 部分 - 无状态组件
【发布时间】：2020-02-01 16:41:42
【问题描述】：

对 react 和 redux 有点陌生。在用户选择特定选项值后，我试图调用/显示一个部分。此选择将通过 API 填充（我可以处理），但现在，例如，如果我有以下代码

const Student = ({key}) = > {
  return (
      <React.Fragment>
         <div>
            <select>
                <option value="markJ">Mark J.</option>
                <option value="maryA">Marry A.</option>
                <option value="peterM">Peter M</option>
            </select>
         </div>
         <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>
      </React.Fragment>

  );
};
export default Student

例如，如果我想在选择值为 maryA 的选项后显示 id 为 #showThisDiv 的 div，我将如何实现？我试图仅在功能组件中执行此操作。

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

您需要使用状态来存储所选选项。当状态值为maryA时，显示showThisDiv。不必使用id="showThisDiv"。

const Student = ({key}) = > {
  const [selected, setSelected] = useState()

  const handleChange = (event) => {
     setSelected(event.target.value)
  }

  return (
      <React.Fragment>
         <div>
            <select value={selected} onChange={handleChange}>
                <option value="markJ">Mark J.</option>
                <option value="maryA">Marry A.</option>
                <option value="peterM">Peter M</option>
            </select>
         </div>
         {selected === 'maryA' && <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>}
      </React.Fragment>

  );
};
export default Student

如果需要多选，可以使用下面的代码：

  const Student = ({key}) = > {
  const [selected, setSelected] = useState()

  const handleChange = (event) => {
     const newSelectedOptions = [...event.target.options].filter(o => o.selected).map(o => o.value);
     setSelected(newSelectedOptions)
  }

  return (
      <React.Fragment>
         <div>
            <select value={selected} onChange={handleChange} multiple>
                <option value="markJ">Mark J.</option>
                <option value="maryA">Marry A.</option>
                <option value="peterM">Peter M</option>
            </select>
         </div>
         {selected.includes("maryA") && <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>}
      </React.Fragment>

  );
};
export default Student

【讨论】：