从数组react-native生成时，多个开关(toggels)一次启用所有功能 [英] Multiple switches (toggels) enable all at once when generated from array react-native

问题描述

现在我在构造函数中得到了一个这样的数组:

 单词:['test'，'test'，'test']， 

在渲染器中，我想生成一个带有文本的元素，并为每个元素切换(切换)，如下所示:

  const wordList = this.state.words.map((item，i)=><查看样式= {styles.wordsContainer}><文本样式= {styles.pilgrimsWordText}键= {i}> {项目}</文本><开关style = {styles.pilgrimsWordSwitch}onValueChange = {(值)=>{this.setState({toggle:value})}}值= {this.state.toggled}/></View>) 

之后，我只显示返回中的元素.

元素被生成，并且看起来一切正常，但是当用户按下其中一个位置(切换)时，所有元素都被启用，就像图片上一样:

解决方案

我认为您必须像在我的示例中那样，跟踪元素索引并为 words 重组数据:

  class示例扩展了React.Component {构造函数(道具){超级(道具);this.state = {字: [{text:'test'，切换为:false}，{text:'test'，切换为:false}，{text:'test'，切换为:false}]}}切换(索引，e){const words = [... this.state.words];words [index] .toggled =！words [index] .toggled;this.setState({words});}使成为() {返回 (< div>{this.state.words.map((word，i)=>< span key = {i}>{word.text}< input type ="checkbox" onChange = {this.toggle.bind(this，i)}/>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^//将函数与您刚刚单击的元素索引绑定</span>)}< br/>< br/>{JSON.stringify(this.state.words)}</div>)}} 

有效示例

Right now I got an array like this in my constructor:

    words: ['test', 'test', 'test'],

Inside the render I want to generate an element with a text and switch (toggle) for every element like this:

const wordList = this.state.words.map((item, i) =>
    <View style={styles.wordsContainer}>
      <Text style={styles.pilgrimsWordText} key={i}>{item}</Text>
      <Switch
        style={styles.pilgrimsWordSwitch}
        onValueChange={(value) => {this.setState({ toggled: value })}}
        value={ this.state.toggled }
      />
    </View>
 )

after that I just show the elements inside the return.

The elements get generated and everything looks fine but when a user press one of the sitches (toggle) all of them get enabled like on the picture:

picture of the elements (with text and switches)

What would you do to just enable the one switch (toggle) the user wishes to enable?

__________ edited :___________ Here is my constructor:

 constructor(props) {
   super(props);
   this.state = {
     words: [{ id: 1, text: 'test'}, { id: 2, text: 'test'}, {id: 3, text: 'test'}],
     textInputValue: '',
   }
  }

And now the map look like this after:

const wordList = this.state.words.map((item, i) =>
    <View style={styles.wordsContainer}>
      <Text style={styles.pilgrimsWordText} key={item.id}>{item.text}</Text>
      <Switch
        style={styles.pilgrimsWordSwitch}
        onValueChange={(value) => {this.setState({ toggled: { [item.id]: value }})}}
        value={ this.state.toggled[item.id] }
      />
    </View>
 )

And here is the error:

解决方案

I think you have to track the element index and restructure your data for words like in my example:

class Example extends React.Component {
    constructor(props){
    super(props);
    this.state = {
      words: [
        {text: 'test', toggled: false},
        {text: 'test', toggled: false},
        {text: 'test', toggled: false}
      ]
    }
  }

  toggle(index, e){
    const words = [...this.state.words];
    words[index].toggled = !words[index].toggled;

    this.setState({ words });
  }

  render() {
    return (
        <div>
        {this.state.words.map((word, i) =>
            <span key={i}>
              {word.text}
              <input type="checkbox" onChange={this.toggle.bind(this, i)} />
                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                   //bind a function with element index you just clicked
            </span>
        )}
        <br/><br/>
        {JSON.stringify(this.state.words)}
      </div>
    )
  }
}

Worked example

这篇关于从数组react-native生成时，多个开关(toggels)一次启用所有功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！