다중 선택 체크박스를 쉽게 만드세요 :D

7286 단어 javascripthtmlreact
여기에서는 React 기본 사항으로 나만의 다중 선택 확인란을 만들기 위한 코드 스니펫을 공유하고 싶습니다.

콜백 함수를 사용하여 선택한 값을 부모 구성 요소에 전달하는 확인란 목록을 렌더링합니다.
  • React.setState()를 사용하여 데이터 상태 변수를 만들고 초기 값을 options prop과 동일하게 설정합니다.
  • 데이터 상태 변수를 업데이트하고 구성 요소의 소품을 통해 전달된 onChange 콜백을 호출하기 위해 checked를 토글하는 데 사용되는 토글 함수를 만듭니다.
  • 요소를 렌더링하고 Array.prototype.map()을 사용하여 데이터 상태 변수를 요소가 자식인 개별 요소
  • 에 매핑합니다.
  • 각 요소에는 type='checkbox' 속성이 있으며 해당 클릭 이벤트가 부모에 의해 처리되므로 readOnly로 표시됩니다
  • .
  • 요소의 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.map((_, 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')
    );
    

    이것이 도움이 되길 바랍니다. ;)

    좋은 웹페이지 즐겨찾기