代码之家 › 专栏 › 技术社区 › trojek

响应本机选取器列表不刷新

native-base react-native

trojek · 技术社区 · 6 年前

我使用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
   };

在我的应用程序中单击选择器并更改其值时,我在控制台中看到它可以工作,但在应用程序中它不会更改(呈现)。

如何在应用程序中修改上述示例以进行更改?

1 回复 | 直到 6 年前

Mukeyii 6 年前

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

使用第二个状态属性并连接组件:

 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});
  }

用这个选择器道具。。。