道具传递不正确-reactjs

我有两个组件，一个用于填写表单，另一个用于在提交输入后显示输入。但是，它当前只显示输入，直到表单提交后才消失。提交表单时，父组件的状态发生了什么变化

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      equation: null
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.mySubmitHandler}>
          <input
            type="text"
            name="equation"
            onChange={this.handleInputChange}
          />
        </form>
        <Parser value={this.state.equation}/>
      </div>
    );
  }

  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  mySubmitHandler = event => {
    event.preventDefault();
    this.setState({ equation: event.target.value });
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };
}

class Parser extends Component {
  render() {
    return <div>{this.props.value}</div>;
  }

类表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
等式：空
};
}
render（）{
返回(
);
}
handleInputChange=事件=>{
event.preventDefault（）；
这是我的国家({
[event.target.name]：event.target.value
});
};
mySubmitHandler=事件=>{
event.preventDefault（）；
this.setState（{等式：event.target.value}）；
警报（“您正在提交”+此.state.equation）；
console.log（this.state.equation）；
};
}
类解析器扩展组件{
render（）{
返回{this.props.value}；
}

您不应该在mySubmitHandler中使用

this.setState（{等式：event.target.value}）；

提交的event.target是表单本身，它没有值。 因此，它将等式设置为未定义

当您

console.log（）

时看到正确状态的原因是setState是异步的，并且该函数调用中的状态仍然带有旧值

---

删除它并查看它是否有效。

您不应该在mySubmitHandler中使用

this.setState（{等式：event.target.value}）；

提交的event.target是表单本身，它没有值。 因此，它将等式设置为未定义

当您

console.log（）

时看到正确状态的原因是setState是异步的，并且该函数调用中的状态仍然带有旧值

---

移除它，看看它是否有效。

在这里，我修改了

handleInputChange

和

mySubmitHandler

，您可以使用它

  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      equation: event.target.value
    });
  };

mySubmitHandler = event => {
    event.preventDefault();
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };

---

在这里，我修改了

handleInputChange

和

mySubmitHandler

您使用的

  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      equation: event.target.value
    });
  };

mySubmitHandler = event => {
    event.preventDefault();
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };

---

在

mySubmitHandler

中，

event.target.value

未定义，这就是解析器文本消失的原因。如果需要在提交处理程序中使用

equation

，只需使用

this.state.equation

，因为它已经通过

handleInputChange

进行了设置

mySubmitHandler = event => {
    event.preventDefault();

    // event.target.value is undefined
    // this.state.equation has already been set via this.handleInputChange
    this.setState({ equation: event.target.value });
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };

---

在

mySubmitHandler

中，

event.target.value

未定义，这就是解析器文本消失的原因。如果需要在提交处理程序中使用

equation

，只需使用

this.state.equation

，因为它已经通过

handleInputChange

进行了设置

mySubmitHandler = event => {
    event.preventDefault();

    // event.target.value is undefined
    // this.state.equation has already been set via this.handleInputChange
    this.setState({ equation: event.target.value });
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };

---

这里的问题是来自

表单submit

事件的

事件.target.value

。 因为事件来自表单提交，所以目标元素是表单，而

target

元素中没有

value

。 如下所示更新组件将解决您的问题

import React, {Component } from 'react';
export default class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = {
      equation: null
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.mySubmitHandler}>
          <input
            type="text"
            name="equation"
            onChange={this.handleInputChange}
          />
          <button type="submit">Submit</button>
        </form>
        <Parser value={this.state.equation}/>
      </div>
    );
  }

  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  mySubmitHandler = event => {
    event.preventDefault();
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };
}

class Parser extends Component {
  render() {
    return <div>{this.props.value}</div>;
  }
}

import React，{Component}来自'React'；
导出默认类Hello扩展组件{
建造师（道具）{
超级（道具）；
此.state={
等式：空
};
}
render（）{
返回(
提交
);
}
handleInputChange=事件=>{
event.preventDefault（）；
这是我的国家({
[event.target.name]：event.target.value
});
};
mySubmitHandler=事件=>{
event.preventDefault（）；
警报（“您正在提交”+此.state.equation）；
console.log（this.state.equation）；
};
}
类解析器扩展组件{
render（）{
返回{this.props.value}；
}
}

---

检查stackblitz解决方案。

这里的问题是来自

表单提交
事件的
事件.target.value
。
因为事件来自表单提交，所以目标元素是表单，而
target
元素中没有
value
。
如下所示更新组件将解决您的问题

import React, {Component } from 'react';
export default class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = {
      equation: null
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.mySubmitHandler}>
          <input
            type="text"
            name="equation"
            onChange={this.handleInputChange}
          />
          <button type="submit">Submit</button>
        </form>
        <Parser value={this.state.equation}/>
      </div>
    );
  }

  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  mySubmitHandler = event => {
    event.preventDefault();
    alert("You are submitting " + this.state.equation);
    console.log(this.state.equation);
  };
}

class Parser extends Component {
  render() {
    return <div>{this.props.value}</div>;
  }
}

import React，{Component}来自'React'；
导出默认类Hello扩展组件{
建造师（道具）{
超级（道具）；
此.state={
等式：空
};
}
render（）{
返回(
提交
);
}
handleInputChange=事件=>{
event.preventDefault（）；
这是我的国家({
[event.target.name]：event.target.value
});
};
mySubmitHandler=事件=>{
event.preventDefault（）；
警报（“您正在提交”+此.state.equation）；
console.log（this.state.equation）；
};
}
类解析器扩展组件{
render（）{
返回{this.props.value}；
}
}

检查stackblitz解决方案。
您需要维护两个状态方程和输入方程

现在，当您更改输入设置状态inputequation时。当您将设置状态equation提交到inputequation时

还有一件事

<input value={this.state.inputequation}/>



输入应通过您的状态进行控制。
您需要维护两个状态方程和输入方程

现在，当您更改输入设置状态inputequation时。当您将设置状态equation提交到inputequation时

还有一件事

<input value={this.state.inputequation}/>



应通过您的状态控制输入。
您应检查此解决方案

我用过你的密码

import React, { Component } from 'react';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      equation: null
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.mySubmitHandler}>
          <input
            type="text"
            name="equation"
            onChange={this.handleInputChange}
          />
        </form>
        <Parser value={this.state.equation}/>
      </div>
    );
  }

  handleInputChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  mySubmitHandler = event => {
    event.preventDefault();
    alert("You are submitting " + this.state.equation);
  };
}


class Parser extends Component {
  render() {
    return <div>{this.props.value}</div>;
  }
}

import React，{Component}来自'React'；
类形式扩展组件{
建造师（道具）{
超级（道具）；
此.state={
等式：空
};
}
render（）{
返回(
);
}
handleInputChange=事件=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
mySubmitHandler=事件=>{
event.preventDefault（）；
警报（“您正在提交”+此.state.equation）；
};
}
类解析器扩展组件{
render（）{
返回{this.props.value}；
}
}
您应该检查此解决方案