如何使用React js根据选择选项更改页面内容

Question

我得到了下面的代码，每个选项都会在同一页面中显示特定内容，假设我从对象数组中获取内容，我将如何使用 useState 挂钩执行此操作。

<FormControl className={classes.formControl}>
          <InputLabel htmlFor="branch">Branch Name</InputLabel>
          <Select
            native
            value={state.location}
            onChange={handleChange}
            inputProps={{
              name: "location",
              id: "branch",
            }}
          >
            <option aria-label="None" value="" />
            <option value={10}>North</option>
            <option value={20}>East</option>
            <option value={30}>West</option>
          </Select>
        </FormControl>

Answer 1

将选定的值存储在一个状态中，并根据该状态的值有条件地呈现：

const [value, setValue] = useState(10)


return (
  <>
    <select value={value} onChange={(event) => setValue(event.target.value)}>
      <option value={10}>North</option>
      <option value={20}>East</option>
      <option value={30}>West</option>
    </select>
    {value === 10 && <SomeComponent/>}
    {value === 20 && <SomeOtherComponent/>}
    {value === 30 && <SomeAnotherComponent />}
  </>
)

如何使用React js根据选择选项更改页面内容

How to change page content base on selector option with reactjs

select

reactjs

use-state