道具未正确传递 - reactjs答案

【问题标题】：props not being passed properly - reactjs道具未正确传递 - reactjs
【发布时间】：2019-11-20 04:35:42
【问题描述】：

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

这里的问题是来自form submit 事件的event.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>;
  }
}

检查 stackblitz 解决方案。Stackblitz

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你不应该在 mySubmitHandler 中使用this.setState({equation: event.target.value});。

提交的 event.target 是表单本身，它没有任何价值。因此它将方程设置为未定义。

console.log() 时看到正确状态的原因是 setState 是异步的，并且该函数调用中的状态仍然具有旧值。

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

【讨论】：

没有修复，在输入时不再渲染文本，但提交后仍然不显示。
handleInputChange 中不需要 e.preventDefault()。我不确定这是否会有所帮助，但绝对不需要。

【解决方案4】：

你需要维护两个状态方程和输入方程。

现在，当您更改输入 setstate 输入方程式时。当您将 setstate equation 提交给 inputequation。

还有一件事

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

输入应该通过你的状态来控制。

【讨论】：

目前的问题是因为输入不是受控组件。因此，当按下提交按钮时，会发生表单擦除的默认行为。当输入被控制时，即使在提交您的输入后仍然会具有状态值。
不完全是，目前的问题是，他在表单提交事件中设置值，这里的值是undefined，onSubmit undefined 设置为状态。这导致值变空。你可以在这里查看解决方案https://stackblitz.com/edit/react-gqhvzs

【解决方案5】：

这里，我修改了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);
  };

【讨论】：

表单unless不需要提交按钮，你需要它。 Enter 键会自动提交表单。
是的，所以我更新了实际需要的解决方案。谢谢。
handleinput 函数有问题，它按预期工作。问题仅在 submitHandler 函数中。您可以查看我的解决方案和 stackblitz 链接。

【解决方案6】：

你应该检查这个stackblitz 解决方案

我已经使用了你的代码。

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

【讨论】：

【解决方案7】：

简单的修复。您正在访问表单的不正确属性。

this.setState({ equation: event.target.value });

这需要是表单元素的名称，即equation:

this.setState({ equation: event.target.equation.value });

您更新的处理程序：

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

JSFiddle

【讨论】：