Question

我对如何正确地动态添加/创建按钮以响应本机感到困惑。我已经在现有信息上使用.map（（）=> {}）来创建组件，然后显示结果。

我是否必须将每个新组件保存到setstate数组中，然后进行映射？我稍微看了一下裁判，但不知道这是否比setstate好。我看到的问题是，如果我想更新每个组件的值，如果它们最初都是重复的，我将如何处理？

类似的事情：

class SingleExercise extends Component {
  constructor(props) {
    super(props);
    this.state = {
      objInfo: this.props.navigation.getParam("obj"),
      currentSetSelected: 0
    };
    this.addSet = this.addSet.bind(this);
  }

  addSet = () => {
    return (
      <addSet />
    )
  }


  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 80 }}>
          <addSet />
          <View>
            <Button         //here
              large={false}
              onPress={() => {
                this.addSet();
              }}
              title={"add more"}
            />
          </View>
        </View>
      </View>
    );
  }
}

const addSet = () => {
  return (
    <TouchableHighlight>
    <View>
    <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        defaultValue={'test'}
        onChangeText={(text) => this.setState({text})}
      />
    </View>
    </TouchableHighlight>
  );
}

Answer 1

这就是我要做的：

每次单击addSet按钮都应像这样增加AddSets计数器：

        <Button         
          large={false}
          onPress={() => {
             this.setState({addSetsCounter: this.state.addSetsCounter});
          }}
          title={"add more"}
        />

每次状态更新后，您的组件都将重新呈现。因此，现在您要做的就是通过该计数器forLoop并返回所需的任意多个AddSets组件。一个简单的for循环，里面带有.push（）即可。

在渲染器内部，在返回之前，应放置以下内容：

let sets =[];    
for(let i =0;i<this.state.addSetsCounter;i++){
    sets.push(<AddSets key="AddSets-{i}"/>);
}

然后只需渲染您的{sets}。

我现在不能完全测试一下，我从头顶上写到，只是上面的内容，至少我希望它能为您指明正确的方向。

我如何在react，react-native中动态追加重复的组件

1 个答案: