Question

我将我的本机选择器与类似这样的选项一起使用：

<Picker
       selectedValue={student}
       label="Student"
       style={styles.picker}
       onChange={this.onStudentChange}
       options={
                categories
                .find(category => {
                     return category.id == year;
                })
                .options.find(category => {
                     return category.id == group;
                })
                .options
       }
/>

然后我在点击处理程序中调度并采取行动，其中e是学生的id：

  onStudentChange(e) {
        if (e !== "") {
            this.props.setStudent(e);
        }
  }

如何获取所选的选项文本以及值？

Answer 1

您可以通过id从选项列表中找到所选的选项。之后，您可以从所选选项中获取文本。在下面的示例中，我将获取选项的代码移到了一个单独的函数中，该函数也在onStudentChange中使用：

getOptions(year, group) {
    return categories
            .find(category => {
                 return category.id == year;
            })
            .options.find(category => {
                 return category.id == group;
            })
            .options
}

onStudentChange(e) {
    if (e !== "") {
        // Find option by id and get text.
        const text = this.getOptions().find(entry => entry.id === e).text;
        this.props.setStudent(e);
    }
}

render() {
    ...
    <Picker
       selectedValue={student}
       label="Student"
       style={styles.picker}
       onChange={this.onStudentChange}
       options={this.getOptions(year, group)}
    />
}

反应本机选择器，获取选定的选项文本

1 个答案: