Почему я не могу использовать значение моей выбранной опции? - PullRequest
Новая
       16

Почему я не могу использовать значение моей выбранной опции?

2 голосов
/ 09 апреля 2019

Я создаю форму, состоящую из двух элементов выбора: один для списка проектов Gitlab и один для списка проектов Clockify. В каждом выборе мои параметры представляют собой массив проектов, метка - это имя проекта, а значение - идентификатор проекта. 

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

Проблема в том, что я не могу получить доступ к выбранному значению опции (идентификатору проекта), так как он возвращает неопределенное значение. 

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

Я, наверное, поступаю неправильно. Кто-нибудь знает, в чем может быть проблема? (Я новичок в реакции).

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

Параметр onChange ожидает функцию, которая принимает выбранное значение в качестве первого аргумента (типирование: One of <Object, Array<Object>, null, undefined>). Поэтому использование event.target.value не имеет никакого эффекта.

Также сама подставка value принимает объект, который будет отображаться в качестве выбранного значения. Таким образом, вы можете сохранить весь объект option и передать его 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}
/>

Также для sidenote: реквизит type не действует, так как он не требуется компоненту Select.

Редактировать: Ссылка: react-select Основная документация

0 голосов
/ 09 апреля 2019

вы можете изменить текущую функцию onChange в Select на: 

onChange={this.handleChange}

и добавить console.log (событие) в вашу функцию handleChange

...