this.setState 不适用于 react-native 中的多文本输入

Question

    {
      element.answers_data.map((answer, index) =>
          <View key={index} style={{paddingLeft: 20}}>
          <TextInput
            value = {answer.answer_text}
             onChangeText={(answer_text) => {
               this.setState({answer_text: answer_text});
             }}
            />
          </View>
    )}

我在数组中使用 TextInput。但它不起作用。请提供任何解决方案。提前致谢

Answer 1

您是否尝试使用多个输入更改同一个状态字段？
可以分开吗？
About 不工作，你是什么意思，组件更新但状态不变，回调不调用，你总是得到相同的 answer_text，或其他什么？

Answer 2

如果您的文本输入是一个数组，您也应该将其反射 state 设为一个数组：

constructor(props) {
    super(props);
    this.state = {
        answers: element.answers_data.map( (answer, index) => {
            return answer.answer_text
        }),
    }
}

render() {
    return (
        <View>
        {
        element.answers_data.map((answer, index) =>
            <View key={index} style={{paddingLeft: 20}}>
                <TextInput
                    value = {this.state.answers[index]}
                    onChangeText={(answer_text) => {
                        /// Since state is immutable, construct a new array for modified answer for specific index.
                        this.setState({
                            answers: [
                                ...this.state.answers.slice(0, index),
                                answer_text,
                                ...this.state.answers.slice(index+1, this.state.answers.length)
                            ]
                        });
                    }}
                />
            </View>
        )
        }
        </View>
    )
}

由于状态是不可变的，你不能只用索引改变数组值。 例如，检查代码为修改后的 answer.

构造一个新数组