Question

我有两个组件，其中一个用于填写表单，另一个用于在提交输入后显示输入。但是，它当前仅显示输入，直到提交表单为止，然后消失。提交表单时，父组件的状态如何？

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

Answer 1

这里的问题是event.target.value事件中的form submit。由于事件来自表单提交，因此目标元素是表单，并且value元素中没有target。像下面这样更新组件将解决您的问题。

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

Answer 2

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

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

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

将其删除，看看是否可行。

Answer 3

在这里，我修改了var instance = new MyClass(); var myValueGetter = new Func<int>( () => instance.MyValue); Console.WriteLine(myValueGetter());和handleInputChange您使用的

mySubmitHandler

Answer 4

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

Answer 5

您需要维护两个状态的方程式和输入方程式。

现在，当您更改输入设置状态输入等式时。将setstate方程提交给inputequation时。

还有一件事

const base64Image = {results.student_photo};
<Image source={{uri: `data:image/jpeg;base64,${base64Image}`}} />

输入应通过您的状态进行控制。

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

Answer 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

道具传递不正确-reactjs

7 个答案: