Javascript 如何通过组件内部的方法传递道具？

我有一个名为“List”的react组件，它使用按钮通过方法“Addpost（）”呈现较小的组件“Post”，该方法从输入表单中获取2个道具。我已将输入保存在2个变量中，但我不知道如何将这些道具传递给列表的render（）返回中的Addpost（）方法

//============列表组件==============

class List extends React.Component{

renderPost(title,content){
    return(
        <Post titolo={title} contenuto={content}/>
    );
}

class Post extends React.Component {

  render() {
    return (
      <li className="w3-padding-16">
      <img src="/w3images/workshop.jpg" alt="Imagedf" className="w3-left w3-margin-right" />`enter code here`
      <span className="w3-large">
        {this.props.titolo}
      </span><br></br>
      <span>{this.props.contenuto}</span>
    </li>
    );
  }
}

addPost应获取输入值并使用renderPost以该标题和内容呈现Post组件

    render(){
        return(
            <div>
          {this.renderPost("testTitle","testContent")}

       <form> 
             Title:<br></br>
             <input type="text" id="inputTitle"/><br></br>
             Content:<br></br>
             <input type="text" id="inputContent"/>
       </form><br></br>
       <button className="square"

    render(){
        return(
            <div>
          {this.renderPost("testTitle","testContent")}

       <form> 
             Title:<br></br>
             <input type="text" value={this.inputTitle} onChnage={event => setState({ inputTitle: event.target.value }) }><br></br>
             Content:<br></br>
             <input type="text" value={this.inputContent} onChnage={event => setState({ inputContent: event.target.value }) } />
       </form><br></br>
       <button className="square"

render（）{
返回(
{this.renderPost（“testTitle”、“testContent”）}
标题：





内容：





此.addPost（标题、内容）
添加帖子！
);
}
}

//================后期组件==============

class List extends React.Component{

renderPost(title,content){
    return(
        <Post titolo={title} contenuto={content}/>
    );
}

class Post extends React.Component {

  render() {
    return (
      <li className="w3-padding-16">
      <img src="/w3images/workshop.jpg" alt="Imagedf" className="w3-left w3-margin-right" />`enter code here`
      <span className="w3-large">
        {this.props.titolo}
      </span><br></br>
      <span>{this.props.contenuto}</span>
    </li>
    );
  }
}

class Post扩展了React.Component{
render（）{
返回(

`在这里输入代码`
{this.props.titolo}



{this.props.contenuto}

);
}
}

编辑

renderPost只需在HTML中的

 addPost(title,content){
     title = document.getElementById("inputTitle").value;
     content = document.getElementById("inputContent").value;
    console.log(title, content)
    this.renderPost(title,content);
}

 state = { inputTitle: '', inputContent: '' }

 addPost(title,content){
     title = document.getElementById("inputTitle").value;
     content = document.getElementById("inputContent").value;
    console.log(title, content)
    this.renderPost(title,content);
}

addPost应获取输入值并使用renderPost呈现帖子

具有该标题和内容的组件

    render(){
        return(
            <div>
          {this.renderPost("testTitle","testContent")}

       <form> 
             Title:<br></br>
             <input type="text" id="inputTitle"/><br></br>
             Content:<br></br>
             <input type="text" id="inputContent"/>
       </form><br></br>
       <button className="square"

    render(){
        return(
            <div>
          {this.renderPost("testTitle","testContent")}

       <form> 
             Title:<br></br>
             <input type="text" value={this.inputTitle} onChnage={event => setState({ inputTitle: event.target.value }) }><br></br>
             Content:<br></br>
             <input type="text" value={this.inputContent} onChnage={event => setState({ inputContent: event.target.value }) } />
       </form><br></br>
       <button className="square"

render（）{
返回(
{this.renderPost（“testTitle”、“testContent”）}
标题：


setState（{inputTitle:event.target.value}）>


内容：


setState（{inputContent:event.target.value}）}/>



this.addPost（this.inputTitle，this.inputContent）
添加帖子！
);
}
}

基本上，无论何时处理表单和输入，都会使用

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import PostList from './components/PostList'
import AddPostForm from './components/AddPostForm'

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      posts: [] //state is handled here
    }

    this.addPost = this.addPost.bind(this)
  }

  addPost(title, content) {
    let newPost = { title, content }
      this.setState(({ posts }) => { return { posts: [...posts, newPost] } } )
  }

  render() {

    const { posts } = this.state

    return (
      <div>
        <AddPostForm onNewPost={this.addPost} /> //we pass addPost to the component
        <br />
        <PostList posts={posts} />
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/PostList”导入PostList
从“./components/AddPostForm”导入AddPostForm
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
posts:[//状态在此处处理
}
this.addPost=this.addPost.bind（this）
}
addPost（标题、内容）{
让newPost={title，content}
this.setState（（{posts}）=>{return{posts:[…posts，newPost]}）
}
render（）{
const{posts}=this.state
返回(
您是否打算通过状态管理输入值？不，如果可能，只使用道具。您是否建议在任何情况下使用状态？尝试使用状态
import React from 'react';
import Post from './Post';

const PostList = ({ posts=[] }) => {
    return (
        <div className="post-list">
            {
                posts.map((post, index) => 
                    <Post key={index} titolo={post.title} contenuto={post.content} />
                )
            }
        </div>
    )
}

export default PostList