Question

我正在构建一个包含两个选择的表单：一个用于列表Gitlab项目，另一个用于Clockify项目列表。在每次选择中，我的选项都是一个项目数组，其中label为项目名称，value为项目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>

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

Answer 1

onChange道具需要一个接受所选值作为第一个参数的函数（键入：One of <Object, Array<Object>, null, undefined>）。因此，使用event.target.value无效。

value道具本身也接受一个对象，它将显示为选定值。因此，您可以保存整个选项对象，然后将其提供给value道具：

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

Answer 2

您能否将“选择”中的当前onChange函数更改为：

onChange={this.handleChange}

并将console.log（event）添加到您的handleChange函数中

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

2 个答案: