在 React JS 中将输入值 onSubmit 从子组件传递给父组件

问题描述

在我的应用程序中，我有一个子组件：Post，它有一个用于提交一些数据的输入文本框。

我的父组件 Posts 应从子组件获取此输入值数据，并在通过函数 addAnswerHandler() 提交后将其发布到 google Firebase 数据库。

如何将带有 inputname=Answer 的输入中的值从子组件传递给父函数 postAnswerHandler()。

React,{ Component } from 'react';
import { render } from 'react-dom';
import { Link,Route,NavLink,Switch,Redirect } from 'react-router-dom';
import Answered from '../../containers/Blog/answered/answered-posts';
import './Post.css';

import RothIRA_1 from '../../containers/Types/RothIRA_1';



function post (props) { 
  
return (
    <article key={props.id} className="Post" onClick={props.clicked}>
       <h1>{props.key_1}</h1>
        <h1>{props.title}</h1>
         <p className="Body-Content">{props.body}</p>
           <div className="Info">

             <div className="Answer-Section">
   
              <input type="text" className="Question-Answer" name="Answer" value={'test'} 
              placeholder="Your Answer..." ></input>
       
        <li className="Answer-Button"><input type="submit" value="Answer" id="submitButton" /></li>
    </div>
        <ul>
       
            <li className="Type-Link"><NavLink to={{
                pathname: '/'+ props.type,hash: '#submit',search: '?quick-submit=true'
                }}>{props.type}</NavLink></li>
            
                        
        </ul>
        
    </div>
        
        <Switch>
            <Route path="/RothIRA" component={RothIRA_1} />
            <Route path="/answered" component={Answered} />
             {/* <Route path={'/' + props.type} component={RothIRA_1} /> */}
             {/* <Route path= {'/'+ props.type} component={RothIRA} /> */}
             


        </Switch>
    </article>
    
 );
}
export default post;

import React,{ Component } from 'react';
import axios from '../../../axios';
import { Link,Redirect } from 'react-router-dom';

import Post from '../../../components/Post/Post';
import './Posts.css';
import FullPost from '../FullPost/FullPost';
import Answered from '../answered/answered-posts';
import Unanswered from '../../Unanswered/Unanswered-Posts';
import Myquestions from '../My-Questions/Myquestions';
import RothIRA_1 from '../../Types/RothIRA_1'

class Posts extends Component {
    state = {
        posts: []
    }

    componentDidMount () {
        
        axios.get( 'https://blog-6d4da-default-rtdb.firebaseio.com/posts.json' )
            .then( response => {
                let posts = Object.values(response.data);
                let keys = Object.keys(response.data);
              
                const updatedPosts = keys.map( key => {    
                    return {
                        key,...response.data[key],}
                } );
                   
                    this.setState( { posts: updatedPosts } );

               
             
            } )
            .catch( error => {
                console.log( error );
                
            } );
    }

    postAnswerHandler = ( id,question_answer ) => {
       
        const data = {
            answer: question_answer

        };
         const data_1 = JSON.stringify(data);
         axios.put('/posts/'+id+'.json',data);

    }

    

   

    render () {
        let posts = <p style={{ textAlign: 'center' }}>Something went wrong!</p>;
        if ( !this.state.error ) {
            posts = this.state.posts.map( (post) => {
                return (
                    
                    <Post
                        key={post.key}
                        id={post.key}
                        title={post.title}
                        type={post.type}
                        body={post.body}
                        answer={post.answer}
                        clicked={() => this.postAnswerHandler(post.key,post.answer)}
                         />
                        
                    
                );
            } );
        }

        return (
            <div className="Posts-Page">
            
                <section className="Posts">
                    {posts}
                </section>
                
            </div>
        );
    }
}

export default Posts;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）