如何处理复选框操作 - 本机反应？

Question

我有两个功能：

    const SelectCheckBox = (obj, isChecked) => {
    
        if (isChecked) {
          result += parseFloat(obj.value);
        } else {
          result -= parseFloat(obj.value);
        }
    
      };
    
      const SelectAllRadioButton = (objList) => {
        setSelectAll(true);
        result = 0;
    
        for (const property in objList) {
          result += parseFloat(objList[property].value);
        }
    
      };

    {props.List?.map((item, index) => renderRow(item, index))}

const renderRow = (obj, index) => (
             <Field
              checked={selectAll}
              component={checkboxComponent}
              name={index}
              onChange={(isChecked) => SelectCheckBox({ index, obj }, isChecked)}
            />
)

当我单击 SelectAllRadioButton 时，所有复选框都被选中。当我单击 SelectCheckBox 时，应该取消选中我单击的复选框。但是，由于checked={selectAll}，我不能这样做。我该如何处理

Answer 1

每个复选框都需要一个布尔值。您对所有这些都使用了相同的值。

您可以使用数组作为状态，其中每个元素代表具有相同索引的复选框的选中状态。

  const [checks, setChecks] = useState(props.List ? props.List.map(item => false) : [])

     const toggleChecked = (idx) => {
        setChecks(checks.map((item, index) => {
             index === idx ? !item : item
        }))
      };
    
      const SelectAllRadioButton = (objList) => {
        
          setChecks(checks.map((item) => true))
      };

    {props.List?.map((item, index) => renderRow(item, index))}

     const renderRow = (obj, index) => (
             <Field
              checked={checks[index]}
              component={checkboxComponent}
              name={index}
              onChange={(isChecked) => toggleChecked(index)}
      />)

如何处理复选框操作 - 本机反应？

How to handle checkbox action - react native?

checkboxlist

react-native