一個復選框的狀態影響其他復選框

Question

我有這個問題 - 作為在父屏幕上呈現的自定義組件 (TimeButtonCheck) 的一部分，我有多個復選框。 在父屏幕上有一個填充的數組 - 無論復選框是選中還是未選中。 但是有一個問題正在發生。 如果我選中/取消選中這些復選框之一，它們都會取消選中，因為它們在父組件中具有相同的狀態。 當我將狀態拆分為這些子組件時，我無法從子組件修改父組件的數組。 有人可以幫我解決這個問題嗎？ 這是我的代碼（子元素）：

    const TimeButtonCheck = props => {
const [ceknute, setCeknute] = useState(true);
const [pole, setPole] = useState(["9:00", "10:00", "11:00"]);

const checkHandler = (id) => {
    setCeknute(!ceknute);
    if(!ceknute) {
        const novePole = pole.slice();
        novePole.push(id);
        console.log("pushuj");
        setPole(novePole);
        console.log(novePole);
    }
    else
    {
        console.log("filtruj");
    }

};
return (
        <View style={styles.customButon}>
        <CheckBox
        checked = {ceknute}
        key = {props.key}
        onPress={(key) => {checkHandler(key)}}
        checkedColor = {Colors.primaryColor}
        containerStyle = {{padding:0,}}
        />

            <TouchableOpacity activeOpacity={0.5}>
                <Text 
                style={styles.textInButton}>
                {props.cas}
                </Text>
            </TouchableOpacity>
        </View>
);

這是我的父組件，它在屏幕上映射這些 TimeButtonChecks：

const JazdyInstruktor = props => {
    const pole = ["8:00", "9:00", "10:00"];
  const selectedStartDate = null;
  const [isLoading, setIsLoading] = useState(true);
  const [displayText, setDisplayText] = useState(true);
  const dataToMap = ["11:00", "12:00", "13:00", "14:00", "15:00"];


 const maper = (data) => {
    return(
      <View style = {{marginHorizontal: 18,}}>
      <View style ={styles.instruktor}>
      <InstruktorBar />
      </View>
      <View style = {styles.screen}>
      {data.map((item) => {
        return ( 
        <TimeButtonCheck
         key = {item}
         cas={item}
         />
   )})}
      </View>
      </View>
    );
  }

  const startDate = selectedStartDate ? selectedStartDate.toString() : '';
  const token = useSelector(state => state.auth.token);

    return(
    <View style={styles.container}>
    <CalendarPicker 
    onDateChange={dateChangeHandler}
    />
    <View>
    {(isLoading) ? ((displayText) ? (<View style={styles.centered}><Text>Pre zobrazenie volnych terminov si vyberte datum</Text></View>) : (<View style = {{paddingTop: 10,
      textAlign: 'center',}}><ActivityIndicator size='large' color={Colors.primaryColor}/></View>)) : **maper(dataToMap)**}
    </View>

    </View>

在這種情況下，我無法通過這些子組件修改名為pole 的父數組 - 我只能為每個子組件修改單獨的數組。 有沒有辦法解決這個問題？ 謝謝你。

Answer 1

將狀態保存在父組件中，復選框組件只顯示數據。

function CheckBox({ value, label, isChecked }) {
  return (
    <label>
      <input type="checkbox" checked={isChecked} value={value} />
      <span>{label}</span>
    </label>
  );
}

function Parent() {
  // list of checkbox, `value` should be the format we want to save, label is something we want to display to the users
  const list = [
    { value: "1100", label: "11:00" },
    { value: "1200", label: "12:00" },
    { value: "1300", label: "13:00" }
  ];
  // every item default is un-checked
  const [data, setData] = useState(() =>
    list.map(item => ({
      ...item,
      isChecked: false
    }))
  );

  // update the check status in the parent component
  function handleToggleCheckbox(value) {
    setData(list =>
      list.map(item => {
        if (item.value === value) {
          return {
            ...item,
            isChecked: !item.isChecked
          };
        }
        return item;
      })
    );
  }

  return (
    <div className="App">
      {data.map(({ value, label, isChecked }) => (
        <CheckBox
          key={value}
          checked={isChecked}
          value={value}
          label={label}
          onClick={() => handleToggleCheckbox(value)}
        />
      ))}
    </div>
  );
}

Answer 2

這是當我 console.log(data)

@