将状态传递给另一个组件以便我可以呈现列表？

如何解决将状态传递给另一个组件以便我可以呈现列表？

我正在尝试呈现一个列表，我正在一个类中做我的中心组件，并且我想通过一个表单和一些输入来设置类的状态，以便我可以使用这些值来呈现一个列表元素，但它是不工作，我什至无法在点击后记录状态的属性，我怎样才能设法在输入上使用这些值来呈现列表元素？我应该改用钩子吗？

class TASKMANAGER extends Component {
    constructor(props){
        super(props);
        this.state= {
            name: "",description:"",priority: "urgent",}
        
    
    }

     
    

    handleTitleChange = event => {
        this.setState( {
            name: event.target.value
        })
        };

    handleDescriptionChange = event => {
        this.setState({
            description: event.target.value
        })
        };

    handlePriorityChange = event => {
        this.setState({
            priority: event.target.value
        })
        };
        
    
    handleClick() {
            console.log(this.state);
        }
            

    

    render() {

        return (
            <div>
             <div className= 'task-form'>  
            <form>
                <div>
                    <label>Name your task!</label>
                    <input type= 'text' id='task-title' value={this.state.name} onChange={this.handleTitleChange} />
                </div>
                <div>
                    <label>Description?</label>
                    <textarea id='description' value={this.state.description} onChange={this.handleDescriptionChange}/>
                </div>
                <div>
                    <label>Priority?</label>
                    <select value={this.state.priority} onChange={this.handlePriorityChange}>
                        <option value='urgent'>Urgent</option>
                        <option value='regular'>Regular</option>
                        <option value='Can wait'>Can wait</option>
                    </select>    
                </div>
                <button onClick={this.handleClick}>PRESS</button>
            </form> 
            </div>
            <div className='list-items'>
                <ul>
                
                </ul>
            </div>
            </div>   
            )
    }}

解决方法

您的 [PRESS] 按钮将触发表单 提交 事件，默认情况下该事件将刷新页面。
? 永远不会看到您的日志代码。

你的代码几乎没问题。
只需在 handleClick() 函数中添加 preventDefault()。

    handleClick = (event) => {
        event.preventDefault();
        console.log(this.state);
    }

,

我已经编辑了您的代码并删除了表单提交事件，因为即使没有表单提交以在同一页面中呈现列表，您也可以将列表存储在状态

pip install numba

};

并在渲染中显示为列表

  class App extends Component {
   constructor(props) {
    super(props);
    this.state = {
     name: "",description: "",priority: "urgent",list: [] // added the list to add above values
    };
  }
 .......
 ........
handleClick = (event) => {
 this.setState((state) => {
  const list = [
    ...state.list,{
      name: state.name,description: state.description,priority: state.priority
    }
  ];
  return {
    list
  };
 });