javascript - React - 从子表单组件更新父状态

Question

我正在尝试从我的子组件表单 <Form handler = {this.handler} /> 更新我的状态。但是当我按回车键时，当前状态值为空。我认为问题出在我的 handler(e) 函数中，但我不知道它是什么。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
import { Button } from 'react-bootstrap';

class App extends Component {
  constructor(props) {
    super(props);

    this.handler = this.handler.bind(this)


    this.state = {
      value: 11
    }
  }

  handler(e) {
    e.preventDefault();
    this.setState({
      value: e.target.value
    })
  }


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Button bsStyle='success'>Hello</Button>
        <Form handler = {this.handler} />
        <h1>{this.state.value}</h1>
      </div>
    );
  }
}

export default App;

import React from 'react';
import {FormControl} from 'react-bootstrap';
import {FormGroup} from 'react-bootstrap';
import {ControlLabel} from 'react-bootstrap';
import {HelpBlock} from 'react-bootstrap';
import {InputGroup} from 'react-bootstrap';

class Form extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: ''
    };
  }

  getValidationState() {
    const length = this.state.value.length;
    if (length > 10) return 'success';
    else if (length > 5) return 'warning';
    else if (length > 0) return 'error';
    return null;
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <form onSubmit = {this.props.handler}>
        <FormGroup
          bsSize="small"
          controlId="formBasicText"
          validationState={this.getValidationState()}
        >
          <InputGroup>
            <FormControl
              type="text"
              value={this.state.value}
              placeholder="Enter text"
              onChange={this.handleChange}
            />
            <InputGroup.Addon>lbs</InputGroup.Addon>
          </InputGroup>
          <FormControl.Feedback />

        </FormGroup>
      </form>
    );
  }
}

export default Form;

Answer 1

您已在 App 中定义了 handleChange 并将其传递给 Form。但您不是使用传递的 prop 函数，而是再次在 Form 组件中创建一个新函数 handleChange。您还在两个组件中声明了 value 状态。使用 handleChange prop 函数来处理更改，而不是创建新的更改，

<FormControl
    type="text"
    value={this.state.value}
    placeholder="Enter text"
    onChange={this.props.handleChange}
/>