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

value={firstName}

必须为

value={this.state.firstName}

因为键入时您的值正在更改

Answer 2

您能否在Form.Control中尝试 onChange = {onChange} 而不是onChange = {（）=> onChange（value）} 还要检查是否直接返回值，或者如果使用event.target.value

返回事件，则返回事件

如何在React Bootstrap上获取输入表单的值？

2 个答案: