为什么我不能使用我选择的选项的值？

Question

我正在构建一个包含两个 select 的表单：一个用于 Gitlab 项目列表，一个用于 Clockify 项目列表。在每个 select 中，我的选项是一个项目数组，标签是项目名称，值是项目 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)
    }
...

问题是：我似乎无法访问我的 selected 选项值（项目 ID），因为它 returns 未定义。

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

我可能做错了。有谁知道问题可能是什么？（我是反应初学者）。

Answer 1

能否将 Select 中的当前 onChange 函数更改为：

onChange={this.handleChange}

并向您的 handleChange 函数添加一个 console.log（事件）

Answer 2

onChange 属性需要一个接受所选值作为第一个参数的函数（类型：One of <Object, Array<Object>, null, undefined>）。所以使用 event.target.value 没有效果。

value 道具本身也接受一个对象，它将显示为选定值。所以你可以保存整个选项对象并将其提供给 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}
/>

另外在旁注中：道具 type 没有效果，因为 Select 组件不需要它。

编辑：参考：react-select prop documentation

为什么我不能使用我选择的选项的值？

Why can't I use the value of my selected option?

reactjs

react-select