reactjs - 为什么我无法使用所选选项的值？

Question

我正在构建一个包含两个选择的表单:一个用于列表 Gitlab 项目，另一个用于列表 Clockify 项目。在每个选择中，我的选项是一个项目数组，标签是项目名称，值是项目 ID。

class NewDashboard extends Component {

  constructor(props) {
    super(props)
    this.state = {
      gitlabId: '',
      clockifyId: ''
    }
  }

  handleChange = event => {
    change({ 'gitlabId': event.target.value, 'clockifyId': event.target.value })

  };

render() {

const { gitlabId, clockifyId } = this.props.form
const { projects, projTime } = this.props

if (projects) {
      gitlabProjs = projects.map(project => ({
        value: project.id,
        label: project.namespace.name + ": " + project.name,
      }));
      console.log(gitlabProjs)
    }

if (projTime) {
      clockifyProjs = projTime.timeEntries.map((timeEntry) => ({
        value: timeEntry.project.id,
        label: timeEntry.project.name,
      }));
      // console.log(clockifyProjs)
    }
...

问题是:我似乎无法访问我选择的选项值(项目 ID)，因为它返回未定义。

<Select
      value={gitlabId.value}
      type="search"
      options={gitlabProjs}
      onChange={e => {
        change({ 'gitlabId': gitlabProjs.value })
                 console.log(gitlabProjs.value)
      }}
      placeholder="Projeto no Gitlab..."
></Select>

我可能以错误的方式这样做。有谁知道可能是什么问题？ (我是 react 初学者)。

Answer 1

onChange prop 需要一个接受所选值作为第一个参数的函数(输入: One of <Object, Array<Object>, null, undefined> )。所以使用event.target.value没有效果。

还有value prop 本身接受一个将显示为选定值的对象。因此，您可以保存整个选项对象并将其提供给 value Prop :

handleChange = (option) => {
    change({'gitlabId': option, 'clockifyId': option});
}

<Select
    { ... }
    value={gitlabId}
    onChange={this.handleChange}
/>

或者您可以保存选项的值，然后过滤选项数组以查找选定的值:

handleChange = (option) => {
    change({'gitlabId': option.value, 'clockifyId': option.value});
}

<Select
    { ... }
    value={gitlabProjs.find((val) => val.value === gitlabId)}
    onChange={this.handleChange}
/>

旁注: Prop type没有效果，因为 Select 不要求它组件。

编辑:引用: react-select prop documentation