搜索
搜索

设置状态不会更新下拉复选框-使用挂钩

Prova12 发表于 Dev
35
Prova12

我是新来的人，我正在建立一个网站，用户可以jurisdiction在其中通过复选框下拉列表选择特定类别（又名），并query在搜索栏中写一个。

我的亲子关系是：

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

我的seachbar作品很好。（如何通过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;
天使萨拉萨尔

组件的简约版本

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用var设置复选框状态

使用JSX设置复选框默认状态的正确方法

使用 SendMessage 设置 TreeViewItem 复选框状态

使用useState更新React中多个复选框的状态

React：使用子复选框更新父组件的状态

使用复选框更新每个动态行的状态

使用状态挂钩正确设置状态

使用挂钩设置活动的className

如何使用useState挂钩设置初始状态

如何使用反应挂钩设置状态数组

使用 nodejs 捕获复选框的状态

使用 setState 更改复选框的状态

使用复选框记住Gridview状态

使用复选框更新Ajax DB不会在Laravel上更新

使用jQuery设置复选框的“ checked”

使用 PHP 或 jQuery 设置 Bootstrap-Switch 复选框选中状态

使用复选框更新数据库中的状态 - Laravel

使用jQuery更新状态后，复选框未显示已选中的i UI

如何在不使用无限挂钩的情况下从使用该挂钩的挂钩中更新组件中的状态？

是否可以在样式化组件中不使用三元的情况下根据复选框的状态设置复选框的子项样式？

反应挂钩状态不使用最新

如何使用嵌套对象更改状态挂钩？

如何设置未选中的复选框1选中复选框2并设置未选中的复选框2使用脚本选中复选框1时？

使用超链接在复选框hack中切换复选框的状态

使用父类复选框时，如何让子类复选框更改状态？

我想将复选框数据存储到功能状态挂钩中，但无法执行

将动态复选框的值存储到状态挂钩中

使用多个下拉复选框选择附近的地点

使用jQuery选中复选框的MultiSelect下拉列表

TOP 榜单

  1. 1

    计算数据帧R中的字符串频率

  2. 2

    Android Studio Kotlin：提取为常量

  3. 3

    Excel 2016图表将增长与4个参数进行比较

  4. 4

    获取并汇总所有关联的数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  7. 7

    将加号/减号添加到jQuery菜单

  8. 8

    算术中的c ++常量类型转换

  9. 9

    TYPO3：将 Formhandler 添加到新闻扩展

  10. 10

    TreeMap中的自定义排序

  11. 11

    如何开始为Ubuntu开发

  12. 12

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  13. 13

    无法使用 envoy 访问 .ssh/config

  14. 14

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  15. 15

    遍历元素数组以每X秒在浏览器上显示

  16. 16

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  17. 17

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  18. 18

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  19. 19

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  20. 20

    尝试在Dell XPS13 9360上安装Windows 7时出错

  21. 21

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

热门标签

归档