🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

React Input - 多选列表向父组件传值

2019-09-12

描述

渲染一个多选框列表,可以使用回调函数向父组件传递被选中的一个或多个值。

  • 使用 React.setState() 创建一个 data 状态变量,设置 options 属性为他的始化值
  • 创建一个 toggle 方法,可以使用列表中 checked 的选中与否来更新 data 状态变量,可以调用组件属性中的 onChange 回调
  • 渲染一个 <ul> 元素,使用 Array.prototype.map()data 状态变量进行迭代,每一项使用一个包含 <input> 元素的 <li> 元素作为他们的儿子
  • 每一个 <input> 元素都包含 type='checkbox' 属性,且标记为 readOnly,他的点击事件将会传递给父元素 <li>onClick 来执行

实现

const style = {
  listContainer: {
    listStyle: 'none',
    paddingLeft: 0
  },
  itemStyle: {
    cursor: 'pointer',
    padding: 5
  }
};

function MultiselectCheckbox({ options, onChange }) {
  const [data, setData] = React.useState(options);

  const toggle = item => {
    data.forEach((_, key) => {
      if (data[key].label === item.label) data[key].checked = !item.checked;
    });
    setData([...data]);
    onChange(data);
  };

  return (
    <ul style={style.listContainer}>
      {data.map(item => {
        return (
          <li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>
            <input readOnly type="checkbox" checked={item.checked || false} />
            {item.label}
          </li>
        );
      })}
    </ul>
  );
}

使用

const options = [{ label: 'Item One' }, { label: 'Item Two' }];

ReactDOM.render(
  <MultiselectCheckbox
    options={options}
    onChange={data => {
      console.log(data);
    }}
  />,
  document.getElementById('root')
);

返回总目录

每天 30 秒系列之 React


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步