создание составного поля с помощью response-final-form

Я хочу создать составное поле (например, Местоположение, которое само содержит 2 внутренних ввода latitude и longitude) с react-final-form, но я не могу найти подобный пример.

<Field name="myField">
  {props => (
    <div>
      <TextField
        name={props.input.name}
        value={props.input.value}
        onChange={props.input.onChange}
      />
    </div>
  )}
</Field>

Это простой пример с одним входом. Моя проблема в том, что у нас два входа, и я не знаю, как обращаться с onChange.


reactjs react-final-form
person Saman Mohamadi    schedule 13.08.2019    source источник
comment
Добавьте код для своего варианта использования. С 2 текстовыми полями.   -  person Mukesh Soni    schedule 13.08.2019
comment
Вы должны сделать это - onChange={(value) => props.input.onChange(value)}   -  person ravibagul91    schedule 13.08.2019
comment
@ ravibagul91 Вы правы, я думал, что onChange принимает только событие   -  person Saman Mohamadi    schedule 13.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Я не понимаю вашего точного требования, но вы можете вызвать один и тот же метод для onChange в обоих текстовых полях.

handleLocationChange(partNumber, event) {
  if(partNumber === 1) {
    // handle change to first part of location
  } else {
    // handle change to second part of location
  }
}

render () {
  return <Field name="myField">
    {props => (
      <div>
        <TextField
          name={props.input.name}
          value={props.input.value}
          onChange={this.handleLocationChange.bind(this, 'part1')}
        />
        <TextField
          name={props.input.name}
          value={props.input.value}
          onChange={this.handleLocationChange.bind(this, 'part2')}
        />
      </div>
    )}
  </Field>
}

Предполагая, что оба раздела вашего местоположения являются текстовыми, вы, вероятно, захотите заменить TextField на input

person Mukesh Soni    schedule 13.08.2019

arrow_upward
0
arrow_downward

Есть ли причина, по которой это неприемлемо?

<Field name="location.latitude" component="input"/>
<Field name="location.longitude" component="input"/>
person Erik R.    schedule 05.09.2019