Блог

Я пытаюсь получить значение формы ввода в 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 })}
        />
   )
  }
}
  

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

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

 value={firstName}
  

должно быть

 value={this.state.firstName}
  

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

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