javascript - React Native : In an array of Text Inputs which are looped then displayed, 如何获取第n个元素并分别修改这些元素？

Question

在这个模块中，我试图创建一个类似于 Twitter 中的调查模块。

起初，文本输入边框的颜色是灰色的，当我聚焦(单击)文本输入时，只有其中一个(单击一个)必须是蓝色的。当我输入文本时有同样的想法，它们都不应该得到相同的值。我应该能够获取通过单击加号图标创建的每个文本输入值，作为字符串

我应该使用平面列表还是 ListView 而不是 for 循环？ React-Native Listview, press row and change that row style 我也试着按照这个例子解决了。 我稍微改变了这个例子，我能够改变点击的边框颜色。但是，我仍然无法获得这些值...

任何解决方案建议？谢谢。

screenshot 1

screenshot 2

这是我的代码；

changeInputBorderColor = () => {
    const newinputBorderColor = cloneDeep(this.state.inputBorderColor);
    newinputBorderColor.bar = '#04A5F5';
    this.setState({inputBorderColor: {bar: newinputBorderColor.bar}});
};
changeInputBorderColor2 = () => {
    this.setState({
        inputBorderColor: {
            bar: 'grey'
        }
    })
};
incrementInputCount = () => {
    if (this.state.inputCounter < 5) {
        this.setState(prevState => {
            return {inputCounter: prevState.inputCounter + 1}
        });
        console.log(this.state.inputCounter);
    }
    else {
        this.setState(prevState => {
            return {inputCounter: prevState.inputCounter}
        });
        alert("Maximum soru sayısına ulaştınız");
    }
};

render() {
    let surveyOptions = [];
    for (let i = 0; i < this.state.inputCounter; i++) {
        console.log(this.state.inputCounter);
        surveyOptions.push(
            <View key={i}>
                <View>
                    <TextInput
                        style={[styles._surveyTextInput, {borderColor: this.state.inputBorderColor.bar}]}
                        onChangeText={(text) => this.setState({text})}
                        value={this.state.text}
                        onFocus={this.changeInputBorderColor}
                        onBlur={this.changeInputBorderColor2}
                        placeholder={"Secenek " + (i + 1)}
                    />
                </View>
            </View>
        )
    }
    return (
        <View style={styles._surveyMainContainer}>
            <View style={{flex: 0.8}}>
                {surveyOptions}
                <TouchableOpacity style={{position: 'absolute', right: 5, top: 5}}>
                    <Ionicons name={"ios-close-circle"}
                              size={30}
                              color={'black'}
                    />
                </TouchableOpacity>
                <TouchableOpacity style={{position: 'absolute', right: 5, top: 45}}
                                  onPress={this.incrementInputCount}>
                    <Ionicons name={"ios-add-circle"}
                              size={30}
                              color={'blue'}
                    />
                </TouchableOpacity>
            </View>
            <View style={{flex: 0.2}}>
                <View
                    style={styles.renderSeparator}
                />
                <Text style={{fontWeight: 'bold', margin: 5}}>Anket süresi</Text>
            </View>
        </View>
    );
}

Answer 1

您可以使用 .map 来完成它，但是您必须正确设置它，以便每个 TextInput 在状态中都有自己的值。目前您正在做的是为每个 TextInput 设置相同的状态值，这会导致每个 TextInput 具有相同的值。显然不是你想要的。

1. 在状态 (textArray) 中创建一个初始数组，其中所有值为空字符串，这将用于存储来自每个 TextInput 的值。
2. 在状态下将focusedIndex设置为null
3. 创建一个使用先前状态值更新当前状态的函数。
4. 创建一个函数来处理框颜色的变化，它只会将 TextInput 索引与当前 focusedIndex 进行比较
5. 遍历 textArray 并创建 TextInput 组件。确保每个 TextInput 在状态中都有自己的值。
6. 确保我们在 TextInput 的 onFocus 和 onBlur 中设置了 focusedIndex 的值。当它模糊时，我们应该将该值设置为 null，以便在关闭键盘时删除边框颜色。

所以我们可以做类似下面的事情

export default class App extends React.Component {

  constructor(props) {
    super(props);
    // construct an array with the number of textInputs we require, 
    // each value an empty string
    // set this array in state
    // set the focusedIndex to null
    let textArray = Array(6).fill('');
    this.state = {
      textArray: textArray,
      focusedIndex: null
    }
  }

  // this function will handle setting of the state when each TextInput changes
  onChangeText = (text, index) => {
    // as there are going to be a lot of setState calls
    // we need access the prevState before we set the next state.
    this.setState(prevState => {
      prevState.textArray[index] = text
      return {
        textArray: prevState.textArray
      }
    }, () => console.log(this.state.textArray))
  }

  // handle the border color
  handleBorderColor = (index) => {
    return index === this.state.focusedIndex ? 'red' : 'grey'
  }

  render() {
    // here we map the items in the `this.state.textArray` 
    // notice that each TextInput is give a specific value in state
    // that will stop the overlap
    return (
      <View style={styles.container}>
        {this.state.textArray.map((text, index) => {
          return <TextInput
            style={{height: 40, marginVertical: 10, borderColor: this.handleBorderColor(index), borderWidth: 1}}
            onChangeText={text => this.onChangeText(text, index)} 
            value={this.state.textArray[index]}
            placeholder={`placeholder for ${index}`}
            onFocus={() => this.setState({focusedIndex: index})}
            onBlur={() => this.setState({focusedIndex: null})}
          />
        })}
      </View>
    );
  }
}

如果您随后想要访问 TextInput 的特定值，您可以这样做

let value = this.state.textArray[index]; // where the index is the value you want

这是一个显示代码工作的示例小吃 https://snack.expo.io/@andypandy/map-multiple-textinputs

下面关于状态的文章绝对值得一看，因为我在这个例子中使用了这些属性。

https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0 https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296 https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6