javascript - 如何通过组件内部的方法传递 Prop ？

Question

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

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

class List extends React.Component{

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

renderPost 只是在 HTML 中渲染 Post 组件

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

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"

我怎样才能做到这一点？标题和内容未定义

 onClick={() => 
               this.addPost(title,content)
               Add Post!
       </button>

           </div>     

        );
    }
}

//=========== 帖子组件==============

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

Answer 1

基本上，每当您处理表单和输入时，您都会使用 refs .

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;

Post.js

import React from 'react';

function Post({titolo, contenuto}) {
    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">
        {titolo}
      </span><br></br>
      <span>{contenuto}</span>
    </li>
    );
}

export default Post

AddPostForm.js

import React from 'react';

const addPostForm = ({onNewPost = f => f}) => { //onNewPost method is passed by props from the parent
    let _titleInput, _contentInput //these are our refs, see the docs for more information

    const submit = (e) => {
        e.preventDefault()
        onNewPost(_titleInput.value, _contentInput.value) //here we call the addPost function that was passed to the component
        _titleInput.value = '' //empty the inputs
        _contentInput.value = ''
        _titleInput.focus() //set focus
    }

    return (
        <form onSubmit={submit}>
            Title:<br></br>
             <input type="text" ref={title => _titleInput = title} /><br></br>{/* Note the ref attribute */}
             Content:<br></br>
             <input type="text" ref={content => _contentInput = content} />
             <button className="square">Add a new post</button>
        </form>
        )
}

export default addPostForm

PostList.js

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

结果: