如何在React Bootstrap中获取表单输入值并解决状态存储失效问题

嘿，我一眼就揪出问题所在啦——你的FormField组件里的onChange回调压根没拿到用户输入的新值，一直在传初始的空字符串！咱们一步步来修正：

问题根源 #

在你的FormField组件中，onChange写的是() => onChange(value)，这里的value是父组件传过来的旧状态值（一开始是空字符串），不管用户输入什么，回调都会把这个旧值传给父组件，导致状态永远更新不了。

修复步骤 #

1. 修正FormField的onChange逻辑 #

把onChange回调改成从事件对象里获取输入框的当前值，也就是e.target.value：

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={(e) => onChange(e.target.value)}
        placeholder={placeholder}
      />
    </Col>
  </Form.Group>
);

2. 确认父组件的状态更新逻辑 #

父组件的写法其实没问题，不过为了更清晰，你可以把参数名改成newFirstName（当然用原来的firstName也完全可以）：

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={(newFirstName) => this.setState({ firstName: newFirstName })}
      />
    );
  }
}

为什么这样能行？ #

现在当用户在输入框打字时，Form.Control的onChange会触发一个包含输入框最新值的事件，我们把这个值通过props传给父组件的onChange回调，父组件再用这个新值更新本地状态，输入框就能正确同步用户输入的内容啦。

内容的提问来源于stack exchange，提问作者Reacting