Javascript 无法将反应表单数据从子组件传递到父组件

我试图将数据从子组件中的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

从“React”导入React；
从“./CalculateIMC”导入CalculateIMC
从“/Results”导入结果；
导入“../css/Form.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
姓名：“，
高度：“，
重量：“，
体重指数：“，
};
this.calBmi=this.calBmi.bind（this）；
}
计算体重指数=（）=>{
const{height，weight}=this.state；
const calcBmi=（体重/（身高/100）**2）。固定（2）；
const bmi class=这个.getBmi（calcBmi）；
this.setState（{isSubmitted:true}）
这是我的国家({
bmi:calcBmi，
BMI等级：BMI等级
})  
}
getBmi=（bmi）=>{
如果（体重指数<18.5）{
返回“减持”；
}
如果（体重指数>=18.5&&bmi<24.9）{
返回“正常重量”；
}
如果（体重指数>=25&&bmi<29.9）{
返回“超重”；
}
如果（体重指数>=30）{
返回“肥胖”；
}
}
clearAll=（）=>{
控制台日志（“测试”）；
这是我的国家({
姓名：“，
高度：“，
重量：“，
体重指数：“
});
};
render（）{
返回(
{this.state.isSubmitted&&}
);
}
}
导出默认应用程序

子组件

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

从“React”导入React；
类calculateMC扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
姓名：“，
高度：“，
重量：“，
体重指数：“，
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit=（e）=>{
e、 预防默认值（）
this.props.calBmi（）
}
render（）{
返回(
此.handleSubmit（e）}>
笔名：
this.setState（{name:e.target.value}）}/>
泰尔：
this.setState（{height:e.target.value}）}/>


POID：
this.setState（{weight:e.target.value}）}/>
结石
埃法克
)
}
}
导出默认计算器

您没有将子级的表单数据传递给父级，而只是调用了不带参数的回调，这就是问题所在

在子组件上，应执行以下操作（或类似操作）：

关于家长：

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
    })  
}

---

您没有将子级的表单数据传递给父级，而是调用了不带参数的回调，这就是问题所在

在子组件上，应执行以下操作（或类似操作）：

关于家长：

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
    })  
}

---

您需要更新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

您需要更新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

Hi，非常感谢您的回答。我已经改变了您的建议，calcBmi和BMI类现在可以工作了，但是身高、体重和姓名没有显示在页面上。我尝试了以下

handleSubmit=（e）=>{e.preventDefault（）this.props.calBmi（{name:this.state.name，height:this.state.height，weight:this.state.weight，}}}）

我找到了答案，请参见下面的代码片段。非常感谢你的帮助，也感谢你把我引向正确的方向。非常感谢

onFormSubmit=（childFormData）=>{const{height，weight，name}=childFormData；const-calcBmi=（weight/（height/100）**2.toFixed（2）；const-bmiClass=this.getBmi（calcBmi）；this.setState({bmi:calcBmi，bmiClass:bmiClass，isSubmitted:true，name，height，weight}}

您好，非常感谢您的回答。我已经改变了您的建议，calcBmi和BMI类现在可以使用了，但是身高、体重和姓名没有显示在页面上。我尝试了以下

handleSubmit=（e）=>{e.preventDefault（）this.props.calBmi({name:this.state.name，height:this.state.height，weight:this.state.weight，}}}

我找到了答案，请看下面的代码片段。非常感谢您的帮助和引导我正确的方向。非常感谢

onFormSubmit=（childFormData）=>{const{height，weight，name}=childFormData；const-calcBmi=（weight/（height/100）**2）.toFixed（2）；const-bmiClass=this.getBmi（calcBmi）；this.setState（{bmi:calcBmi，bmiClass:bmiClass，isSubmitted:true，name，height，weight}）

我找到了答案，请看下面的代码片段。非常感谢您的帮助和引导我走向正确的方向。非常感谢

onFormSubmit=（childFormData）=>{const{height，weight，name}=childFormData；const calcBmi=（weight/（height/100）**2.toFixed（2）；const bmclass=this.getBmi（calcBmi）；this.setState（{bmi:calcBmi，bmiClass:bmiClass，isSubmitted:true，name，height，weight}）

我猜出来了，请看下面的代码片段。非常感谢