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

【问题标题】：How can I grab the value of an input form on React Bootstrap?如何在 React Bootstrap 上获取输入表单的值？
【发布时间】：2019-03-30 00:27:27
【问题描述】：

我试图在 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 })}
        />
   )
  }
}

它只返回一个空字符串。

如何将该输入的值存储在本地组件状态中？

【问题讨论】：

标签： javascript reactjs twitter-bootstrap ecmascript-6 react-bootstrap

【解决方案1】：

value={firstName}

必须是

value={this.state.firstName}

因为你的值在你输入时会发生变化

【讨论】：

抱歉，我刚刚编辑了我的帖子。我正在使用解构分配。 const { firstName } = this.state;

【解决方案2】：

你能不能在 Form.Control 中尝试 onChange={onChange} 而不是 onChange={() => onChange(value)} 还要检查它是直接返回值还是返回事件使用 event.target.value 时返回事件

【讨论】：