javascript - 使用选择器处理动态状态
问题描述
我有一个组件,如果我按下一个按钮,它将创建新的选择器组件
问题是选择器共享相同的状态
我希望每个组件都有自己的状态
有没有办法解决这个问题?
到目前为止我有
constructor(props) {
super(props);
this.state = {
loading: true,
qty: undefined,
selected2: undefined,
garbageTypeQty: 1,
dataKey: undefined,
trashData: undefined,
inputGarbage: [],
total: undefined
};
}
componentDidMount() {
estimationPrice(20)
.then((res) => {
this.setState({ trashData: res.data, loading: false })
}).catch((err) => {
console.log(err);
})
}
<Button small success onPress={() => this.setState({ garbageTypeQty : this.state.garbageTypeQty + 1 })}>
<Text style={styles.buttonAdd}>Add</Text>
</Button>
<Item picker regular style={styles.itemInputBox}>
<Picker
mode="dropdown"
iosIcon={<Icon name="arrow-down" />}
style={styles.itemPickerInput}
selectedValue={this.state.selected2}
onValueChange={this.onValueChange2.bind(this)}
>
{this.state.trashData.map((item, key) => (
<Picker.Item label={item.type.type_name} value={item.type.type_name} key={key} />
))
}
</Picker>
解决方案
现在可以了
我使用https://reactjs.org/docs/update.html
看起来像
handleChange = (index, attributes) => {
let newState = update(this.state, {
garbageInput: {
[index] : {
...attributes
}
}
})
this.setState(newState);
}
推荐阅读
- oracle - 如何使用 sql loader 加载不一致的 CSV 文件?
- jsp - 如何根据 cookie 的存在显示隐藏 div
- javascript - 如何在服务中自动更改 URL,在更改 URL 后它应该影响所有组件,而无需在 angular6 中保存/构建/运行
- mysql - 如何在两个表上执行 MYSQL 连接,其中第二个表的外键值的条件也可能为空
- pug - 哈巴狗中预期的意外令牌“标签”
- ios - 个人热点 Swift 的多点连接
- python - 使用 Camelot 查找 PDF 尺寸
- ssl - 在 bash 脚本中使用 .p12 证书卷曲
- javascript - 如何访问 photoeditorsdk 的导出方法以获取图像 url?
- angular - ngModel 未绑定到角度 5 中的 tinymce