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

Question

我正在尝试呈现一个列表，我正在 Class 中做我的中心组件，并且我想使用表单和一些输入设置 class 的 setState 以便我可以使用那些值来呈现列表元素，但它不起作用，我什至无法在单击后记录状态的属性，我如何设法在输入上使用这些值来呈现列表元素？我应该改用钩子吗？

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

Answer 1

您的 [PRESS] 按钮将触发表单 submit 事件，该事件将 refresh默认页面。
您的日志代码将永远不会被看到。

你的代码差不多没问题了。
只需在 handleClick() 函数中添加 preventDefault()。

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

Answer 2

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

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

};

并在渲染中显示为列表

render() {
 return (
  <div>
    .....
    .....
      </div>
      <button onClick={this.handleClick}>PRESS</button>
     </div>
    <div className="list-items">
      <ul>
        {this.state.list.map((list, index) => (
          <p key={index}>
            Name: {list.name} || Description: {list.description} ||
            priority: {list.priority}
          </p>
        ))}
      </ul>
    </div>
  </div>
);
}
}

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

Passing a state to another component so I can render a list?

reactjs

event-handling

react-props

setstate

react-component