Question

我使用React Native 0.55.4和native-base 2.4.4。我想显示一个带有选择器的列表。

  <List dataArray={action.dates}
    renderRow={(date, _, rowID) =>
      <ListItem>
        <Text>{rowID} {Moment(date.start).format('MMM Do YY')}: {Moment(date.start).format('hh:mm')} - {Moment(date.end).format('hh:mm')}</Text>
        <Form>
          <Picker
            mode="dropdown"
            style={{ width: 160 }}
            selectedValue={this.state.selected_date[rowID]}
            onValueChange={(value, rowID) => this.onValueChange(value, rowID)}
            //onValueChange={this.onValueChange(rowID).bind(this)}
          >
            <Picker.Item label="-" value="-1" key="-1" />
            <Picker.Item label="YES" value="0" key="0"/>
            <Picker.Item label="NO" value="1" key="1"/>

          </Picker>
        </Form>
      </ListItem>
    }>
  </List>

这是一个更改所选项目的值的函数：

  onValueChange(value, rId) {
    let sd = this.state.selected_date.slice();
    sd[rId] = value;
    this.setState({selected_date: sd});
  }

我将有关列表元素值的信息保存在state.selected_date中，它是一个数组。我在构造函数中创建它：

 av = Array(action.dates.length).fill("-1");
    this.state = {
      selected_date: av
   };

在选择器上单击我的应用程序并更改其值时，我在控制台中看到了它的工作原理，但是在应用程序中它没有更改（呈现）。

如何修改上面的示例以在应用程序中对其进行更改？

Answer 1

如果需要单个值，为什么还要对数组进行切片并从中读取/更新？

使用第二个状态属性并连接您的组件：

 state = {..., value: ''}

...处理更改如下：

 onValueChange(value, rId) {
    // do something with your arrays, if necessary...
    let sd = this.state.selected_date.slice();
    sd[rId] = value;
    this.setState({value: value, selected_date: sd});
  }

使用此选择器道具...

  selectedValue={this.state.value}

反应本地选择器列表不会刷新

1 个答案: