Как я могу получить значение формы ввода в React Bootstrap?

Question

Я пытаюсь получить значение формы ввода в React Bootstrap, но очевидный способ, похоже, не работает.

Это компонент поля формы:

const FormField = ({
  type,
  label,
  value,
  onChange,
  controlId,
  placeholder,
}) => (
  <Form.Group as={Row} controlId={controlId}>
    <Form.Label column sm={4}>
      {label}
    </Form.Label>
    <Col sm={8}>
      <Form.Control
        type={type}
        value={value}
        onChange={() => onChange(value)}
        placeholder={placeholder}
      />
    </Col>
  </Form.Group>
);

И вот родитель, где я вызываю этот компонент выше:

class FormFieldsGroup extends Component {
  state = {
    firstName: '',
  };

  render() { 
   const { firstName } = this.state;
   return (
        <FormField
          type="text"
          label="First Name"
          controlId="firstName"
          placeholder="First Name"
          value={firstName}
          onChange={firstName => this.setState({ firstName })}
        />
   )
  }
}

Он возвращает только пустую строку.

Что я могу сделать, чтобы сохранить значение этого ввода в локальном компонентесостояние

Answer 1

Можете ли вы попробовать onChange = {onChange} в Form.Control вместо onChange = {() => onChange (value)} Также проверьте, возвращает ли оно значение напрямую или возвращает событие, если возвращающее событие использует event.target.value

Answer 2

value={firstName}

должно быть

value={this.state.firstName}

потому что ваше значение меняется при вводе