Question

我正在尝试将数据从子组件中的React表单传递到父组件，但是我丢失了一些东西。

当我仅从父组件传递数据时，一切正常。但是我真的很想学习如何使用几个组件。

我是React的新手，非常感谢别人的帮助。

这是我的父组件：

import React from 'react';
import CalculateIMC from './calculateIMC'
import Results from './results';
import '../css/Form.css';
class App extends React.Component{
    constructor(props) {
    super(props)
      this.state = {
        name: "",
        height: "",
        weight: "",
        bmi: "",
      };
      this.calBmi = this.calBmi.bind(this);
    }

  calBmi = () => {
    
    const { height, weight } = this.state;
    const calcBmi = (weight / (height / 100) ** 2).toFixed(2);
    const bmiClass = this.getBmi(calcBmi);
    this.setState({isSubmitted: true})

    this.setState({
      bmi: calcBmi,
      bmiClass : bmiClass
    })  
  }

  getBmi = (bmi) => {
    if(bmi < 18.5) {
        return "Underweight";
        
    }
    if(bmi >= 18.5 && bmi < 24.9) {
        return "Normal weight";
    }
    if(bmi >= 25 && bmi < 29.9) {
        return "Overweight";
    }
    if(bmi >= 30) {
        return "Obesity";
    }
  }
  clearAll = () => {
    console.log("test");
    this.setState({
      name: "",
      height: "",
      weight: "",
      bmi: ""
    });
  };

  render() {
    return (
      <div className="App">
        <CalculateIMC calBmi={this.calBmi}/>
        {this.state.isSubmitted && <Results {...this.state}/>}
      </div>
    );
  }
}
export default App

子组件

import React from 'react';


class CalculateIMC extends React.Component{
    constructor(props) {
    super(props)
    this.state = {
        name: "",
        height: "",
        weight: "",
        bmi: "",
      };
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.calBmi()
        
    }
    render() {

        return (
            <div className="container">

            <form className="card-body" onSubmit={e => this.handleSubmit(e)}>
              <div className="field">
                <div className="two fields">
                <div className="field">
                    <label>Nom : </label>
                    <input type="text" required placeholder="Saisir votre nom" value={this.state.name} onChange={e => this.setState({ name: e.target.value })}/>
                  </div> 
                  <div className="field">
                    <label>Taille : </label>
                    <input type="number" required placeholder="Taille en cms" value={this.state.height} onChange={e => this.setState({ height: e.target.value })}/>
                  </div>
                  <br />
                  <div className="field">
                    <label>Poids : </label>
  
                    <input type="number" required placeholder="Poids en Kgs" value={this.state.weight} onChange={e => this.setState({ weight: e.target.value })}/>
                  </div>
                </div>
                <button type="submit" className="ui button" tabIndex="1">Calcul</button>
                <button className="ui button" tabIndex="0" onClick={this.props.clearAll}>Effacer</button>
  
              </div>
              
  
            </form>
          </div>
        )
    }
}

export default CalculateIMC

Answer 1

您没有将孩子的表单数据传递给父级，而是只是在没有参数的情况下调用回调函数。

您应该在子组件上执行此操作（或类似操作）：

handleSubmit = (e) => {
    e.preventDefault();         
    this.props.calBmi(this.state);          
}

在父项上：

calBmi = (childFormData) => {        
    const { height, weight } = childFormData;
    const calcBmi = (weight / (height / 100) ** 2).toFixed(2);
    const bmiClass = this.getBmi(calcBmi);
    this.setState({isSubmitted: true});   // you can merge this setState with below one

    this.setState({
      bmi: calcBmi,
      bmiClass : bmiClass
    })  
}

Answer 2

您需要更新calBmi（）属性以将表单值作为参数：

父母：

 calBmi = (formParameters) => {
   // do something with formParameters
 }

孩子：

handleSubmit = (e) => {
  e.preventDefault()
  this.props.calBmi({
    name: this.state.name,
    height: this.state.height,
    weight: this.state.weight,
  }
  })
}

我建议您也更改其名称calBmi => onFormSubmit

无法将React表单数据从子组件传递到父组件

2 个答案: