当通过 map 呈现切换按钮列表时，如何使反应原生切换为 true？

Question

Problem:

I am rendering a set of toggle buttons through a map. Now I want to make it true or false each when the user is changing the value of each toggle. This is how I have created the toggle component.

const AnswerToggle = (props) => {
  const {styles, name} = props;
  return (
    <View style={styles.answerContentContainer}>
      <View style={styles.answerTextContainer}>
        <AppText styles={styles.answerText}>{name}</AppText>
      </View>
      <View style={styles.container}>
        <Switch
          trackColor={{false: '#dddddd', true: '#c1d6ee'}}
          thumbColor={{false: '#ffffff', true: '#007aff'}}
          ios_backgroundColor="#dddddd"
          //   ref={name}
          onValueChange={
            (value) => {
              //   ref[name].value = true;
            }

            // console.log(
            //   '>>>>>> value',
            //   this[`${name}`].value,
            // )
          }
          style={styles.toggle}
        />
      </View>
    </View>
  );
};

And I am loading it through map like this.

return answers.map((answer, i) => {
      return (
        <AnswerToggle
          key={i}
          styles={styles}
          name={name}
        />
      );
    });

I try to do it by giving reference to the Switch component. Then It says you cannot use ref without forwardRef so then I put it to the AnswerToggle component but it still giving me the error can some help me to solve this issue?. I tried lot to find out a solution to this problem. But I was unable to do so

Answer 1

Define the onChange handler in the parent component and pass it in as a prop. When the switch is flipped update the state in the parent accordingly and pass the new value to AnswerToggle as a prop.

// pseudo code
const [switchValues, setSwitchValues] = useState([]);
const onChange = (index, value) => setSwitchValues( ... );

answers.map((a, i) => <AnswerToggle value={switchValues[i]} onChange={newValue => onChange(i, newValue) />

Answer 2

This will work just fine:

const AnswerToggle = (props) => {
  const {styles, name} = props;

  const [toggleStatus, setToggle] = React.useState(false)
  const onChange = () => setToggle(status => !status)

  return (
    <View style={styles.answerContentContainer}>
      <View style={styles.answerTextContainer}>
        <AppText styles={styles.answerText}>{name}</AppText>
      </View>
      <View style={styles.container}>
        <Switch
          trackColor={{false: '#dddddd', true: '#c1d6ee'}}
          thumbColor={{false: '#ffffff', true: '#007aff'}}
          ios_backgroundColor="#dddddd"
          onChange={onChange}
          value={toggleStatus}
          style={styles.toggle}
        />
      </View>
    </View>
  );
};

EDIT:

If you need to set the statuses of toggles into the parent component, this is my solution for you:

const AnswerToggle = (props) => {
  const {styles, name, onChange, value} = props;

  return (
    <View style={styles.answerContentContainer}>
      <View style={styles.answerTextContainer}>
        <AppText styles={styles.answerText}>{name}</AppText>
      </View>
      <View style={styles.container}>
        <Switch
          trackColor={{false: '#dddddd', true: '#c1d6ee'}}
          thumbColor={{false: '#ffffff', true: '#007aff'}}
          ios_backgroundColor="#dddddd"
          onChange={() => onChange(name)}
          value={value}
          style={styles.toggle}
        />
      </View>
    </View>
  );
};

const Parent = props => {
    // ... other code

    // set all toggles to false
    const [toggleStatuses, setToggle] = React.useState(
        answers.reduce((toggles,answer) => {
            toggles[answer.name] = false
            return toggles
        },{})
    );

    const onChange = name => setToggle(state => ({
        ...state,
        [name]: !state[name],
    }));

    return answers.map((answer, i) => {
        return (
            <AnswerToggle
                value={toggleStatuses[answer.name]}
                onChange={onChange}
                key={i}
                styles={styles}
                name={answer.name}
            />
        );
    });

}