javascript - 设置状态不更新下拉复选框 - 使用 Hook

Question

我是 React 新手，我正在构建一个网站，用户可以在其中选择复选框下拉列表中的特定类别(又名 jurisdiction)，然后在搜索栏。

我的亲子关系是:

Searchform (parent)
     Dropdown (child of Searchform)
     Searchbar (child of Searchform)

我的 seachbar 工作正常。 ( How to pass state from child to parent with Hooks )

但是

我无法使我的 Dropdown 工作。特别是:

• 所有复选框都已选中(不应该这样)
• setJurisdicitons 不起作用，因为它是 console.log() 单词 Choose... 而不是我实际检查的内容。每次我在表单中按下 submit 按钮时都会发生这种情况。

搜索表单

 function Searchform() {
     function handleSubmit() {
       console.log(query);
       console.log(jurisdictions)
     }

     const [query, setQuery] = useState('');
     const [jurisdictions, setJurisdictions] = useState(["Choose..."]);

     const onChangeQuery = useCallback(
       event => setQuery(event.target.value),
       [],
     );

     const onChangeDropdown = useCallback(
       event => setJurisdictions(event.target.value),
       [],
     );

     return(
       <form onSubmit={handleSubmit}>
         <div className="searchbar-dropdown">
           <div className="searchbar">
           <Searchbar value={query} onChange={onChangeQuery} />
           </div>
           <div className="dropdown">
             <Dropdown value={jurisdictions} onChange={onChangeDropdown}/>
           </div>
         </div>
         <Button variant="contained" color="primary" type="submit">
           Submit your search
         </Button>
       </form>
     )
   }



   export default Searchform;

Dropdown.js

const jurisdictions_list = [
  'Jurisdiction 1',
  'Jurisdiction 2',
  'Jurisdiction 3',
  'Jurisdiction 4',
  'Jurisdiction 5',
];



function Dropdown({ value, onChange }) {
  const classes = useStyles();
  const theme = useTheme();
  console.log("trytrytry")

  console.log(value)
  const handleChange = event => {
    console.log(value);
  };


  return (
    <div className={classes.root}>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="select-multiple-checkbox">Jurisdiction</InputLabel>
        <Select
          multiple
          value={value}
          onChange={onChange, handleChange}
          input={<Input id="select-multiple-checkbox" />}
          renderValue={selected => selected.join(', ')}
          MenuProps={MenuProps}
        >
          {jurisdictions_list.map(jurisdiction_element => (
            <MenuItem key={jurisdiction_element} jurisdiction={jurisdiction_element}>
              <Checkbox checked={jurisdiction_element.indexOf(jurisdiction_element) > -1} />
              <ListItemText primary={jurisdiction_element} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}


export default Dropdown;

Answer 1

您的组件的简约版本

SelectableDropdown 使用 Set 实例在内部跟踪选定的项目，并仅将选定的项目通知父级(请记住，SelectableDropdown 是一个不受控制的组件，您需要添加几行代码以使其成为受控组件)

function Searchbar(props) {
  
  function handleChange(ev) {
    props.onChange && props.onChange(ev.target.value);
  }
  
  return (
    <label className="Searchbar">
      Search 
      <input 
        type="text" 
        value={props.value}
        onChange={handleChange}
      />
    </label>
  )
}

function SelectableDropDown(props) {
  const [selectedOpts, setSelectedOpts] = React.useState(new Set());
  
  function handleChange(ev) {
    const value = ev.target.value;
    const checked = ev.target.checked;
    
    if (checked) {
      selectedOpts.add(value);
    } else {
      selectedOpts.delete(value);
    }
    
    setSelectedOpts(new Set(selectedOpts));
    props.onChange && props.onChange(Array.from(selectedOpts.values()));
  }
  
  return (
    <fielset className="SelectableDropDown">
      {props.options.map((opt) => (
        <label key={opt}>
          {opt} 
          <input 
            type="checkbox" 
            name="opts" 
            value={opt}
            onChange={handleChange}
          />
        </label>
      ))}
    </fielset>
  )
}

const OPTIONS = [
  'Jurisdiction 1',
  'Jurisdiction 2',
  'Jurisdiction 3',
  'Jurisdiction 4',
  'Jurisdiction 5',
];

function App() {
  const [query, setQuery] = React.useState('');
  const [selectedOptions, setSelectedOptions] = React.useState([]);
  
  function handleSubmit(ev) {
    ev.preventDefault();
    console.log('submitting');
    console.log(query);
    console.log(selectedOptions);
    console.log('submitting end');
  }
  
  function handleQueryChange(newQuery) {
    setQuery(newQuery);
  }
  
  function handleOptionsChange(newSelectedOptions) {
    setSelectedOptions(newSelectedOptions);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <Searchbar 
        value={query}
        onChange={handleQueryChange}
      />
      <div>
        <SelectableDropDown 
          options={OPTIONS}
          onChange={handleOptionsChange}
        />
      </div>
      <div>
        <button>Search</button>
      </div>
    </form>
  );
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

.Searchbar,
.SelectableDropDown label {
  display:block;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
</head>
<body>
 <div id="app"></div>
</body>
</html>