Question

我在[沙盒] [1]及以下版本中有一个简单的代码

[1]：https://stackblitz.com/edit/react-72dprn将输入表单值传递给子级给父级，但是出了点问题，该值未传递。

这是app.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Form from './form'

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }

  handleSubmit = e=>{
    this.setState({
      value=e.target.value
    })
  }

  render() {
    return (
      <div>
        <Form onSubmit={this.handleSubmit}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

还有Form.js

import React, { Component } from 'react';
class form extends Component {   
    render() { 
        return (
          <form className="replyForm" onSubmit={this.props.onSubmit}>
           <input /> 
           <button type="submit" className='btn btn-success'>Submit</button>
          </form>);   } }   
export default form;

任何帮助都将不胜感激！

Answer 1

您的代码中有很多错误。您应该正确阅读react docs

首先，您错误地设置了状态-

  handleSubmit = e=>{
    this.setState({
      value: e.target.value   //this is an object don't assign a value//
    })
  }

第二个-在您的 form.js 中，组件以小写字母开头。 React组件以大写字母开头-

class Form extends Component {   
    render() { 
        return (
          <form className="replyForm" onSubmit={this.props.onSubmit}>
           <input /> 
           <button type="submit" className='btn btn-success'>Submit</button>
          </form>);   } }   
export default Form;

现在要问您的原始问题，要将输入的值传递给孩子，您需要将其作为道具传递，并在孩子中将其用作道具-

<Form onSubmit={this.handleSubmit} inputValue={this.state.value} />

在您的子组件中，以this.props.value的形式访问该值。

在React中，如何正确地将输入值从子级传递到父级

1 个答案: