Как передать параметры в Dropdown компонент от semanti c ui реагировать? - PullRequest
Новая
       5

Как передать параметры в Dropdown компонент от semanti c ui реагировать?

1 голос
/ 08 февраля 2020

У меня есть код реакции js ниже, где я помещаю семанти c пользовательский интерфейс Dropdown в map. yoe - это массив в состоянии, я поставил value={yoe[i]}, но как мне передать индекс i в onChange проп? Я попробовал следующее, но метод onAddYoe, кажется, не распознает i. Может ли кто-нибудь любезно помочь? Спасибо! 

              {specialties &&
                specialties.map((specialty, i) => {
                  return (
                    <div className="a-row" key={i}>
                      <div className="a-col-md-12">
                        <div className="a-text-box">
                          <label className="a-mb-5">
                            Years of experience in {specialty}
                          </label>
                          <br />
                          <Dropdown
                            placeholder="0-1 years"
                            fluid
                            selection
                            value={yoe[i]}
                            options={this.yoeList}
                            onChange={this.onAddYoe(i)}
                          />
                          {errors.email ? (
                            <span className="error">Email Required</span>
                          ) : null}
                        </div>
                      </div>
                    </div>
                  );
                })}

1 Ответ

1 голос
/ 08 февраля 2020

Я не знаю, как вы определили свой onAddYoe, но я подозреваю, что это что-то вроде этого. 

function onAddYoe(i) {
  // do something based on i
}

Тогда вы используете его на onChange вот так, обратите внимание, что onChange ожидает функцию , но здесь вы фактически возвращаете результат функции. 

<
  onChange={this.onAddYoe(i)}
/>

Вы должны изменить свою функцию, чтобы она возвращала функцию следующим образом: 

function onAddYoe(i) {
  return () => {
    // do something based on i
  }
}
// or a shorter version on a functional component
const onAddYoe = (i) => () => {
  // do something based on i
}
...