当通过地图呈现切换按钮列表时如何使react native切换为true？

Posted 2021-03-28

问题：

我正在通过地图渲染一组切换按钮。现在，当用户更改每个切换的值时，我想将其设置为true或false。这就是我创建切换组件的方式。

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>
  );
};

而且我正在通过这样的地图加载它。

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

我尝试通过引用Switch组件来做到这一点。然后它说您不能在没有forwardRef的情况下使用ref，因此我将其放入AnswerToggle组件中，但它仍然给我错误，可以帮助我解决此问题吗？我尝试了很多，以找到解决该问题的方法。但我无法这样做

答案

在父组件中定义onChange处理程序，并将其作为prop传入。拨动开关后，将相应地更新父级中的状态，并将新值作为道具传递给AnswerToggle。

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

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

另一答案

这将很好地工作：

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>
  );
};

编辑：

如果您需要将切换开关的状态设置为父组件，这是我为您提供的解决方案：

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}
            />
        );
    });

}