时间戳

首页 > 解决方案 > 在 React 中如何正确地将输入值从子级传递给父级

reactjs - 在 React 中如何正确地将输入值从子级传递给父级

问题描述

我在 [sandbox][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;

非常感谢任何帮助！

标签： reactjsreact-props

解决方案

您的代码中有很多错误。你应该正确阅读反应文档

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

  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.

推荐阅读