如何从子组件 onClick 访问父组件并 setState()

Question

我是一名年轻的开发人员，正在尝试学习一些知识Reactjs，但我无法理解如何配置此 Todo 应用程序。我的目标是有一个按钮，一旦输入并提交，就会将项目添加到列表中。我觉得我已经很接近弄清楚了。

我有一个应用程序组件（父级）、按钮组件和一个列表组件（也是标题和项目组件）。该列表有一个变量，其中有一个空数组供我添加项目，我在我的应用程序组件中引用了该变量。

问题就在这里。我的按钮上有一个事件监听器，它运行一个设置状态的函数。每次单击时我都会记录该列表，这表明该数组正在接收文本输入并创建一个新对象。然而，DOM 并没有重新渲染，更让我困惑的是，当我进行轻微编辑（随机分号）时，DOM 渲染了我上次保存之前输入和记录的项目，但仍然没有响应。

我在这里缺少什么？另外，我知道生命周期方法如componentDidMount()或componentDidUpdate()可能有用，但我不完全理解如何以及在哪里使用它们。

export class Button extends Component {

constructor() {

    super()

    this.handleClick = this.handleClick.bind(this)

}

handleClick() {

    const text = document.getElementById('text_field');

    const input = text.value;

    

        this.setState(() => {

            TodoList.push({id: (TodoList.length+1), name: input})

        })

    console.log(TodoList)

}

render() { 

    return (

        <div>

            <div className='search-container'>

                <input className='search' type='text' placeholder='type something...' id='text_field'></input>

            </div>

            <div className='button-container'>

                <button type='submit' className='button-add' onClick={this.handleClick}> New Task </button>

            </div>

        </div>

    )

}

}

class App extends React.Component {

constructor() {

    super()

    this.state = {

        todos: TodoList

    }

}

render() {

    const todoItems = this.state.todos.map(todo => {

        console.log(todo.name, todo.id);

        return <Item desc={todo.name} key={todo.id} /> 

    })

    

    return(

        <div className='wrapper'>

            <div className='card'>

                <Header numTodos={this.state.todos.length}/>

                <div className='todo-list'>

                    {todoItems}

                </div>

                <Button />

            </div>

        </div>

    )

}  

} 导出默认应用程序

Answer 1

在您的 App.js 中，您应该将一个函数传递给<Button />，这种技术function as prop在 React 中调用。代码App.js应如下所示：class App extends React.Component {constructor() {&nbsp; &nbsp; super()&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; todos: TodoList&nbsp; &nbsp; }}addTodo = (todo) => {&nbsp; this.setState({ todos: [...this.state.todos, todo] })}render() {&nbsp; &nbsp; const todoItems = this.state.todos.map(todo => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(todo.name, todo.id);&nbsp; &nbsp; &nbsp; &nbsp; return <Item desc={todo.name} key={todo.id} />&nbsp;&nbsp; &nbsp; })&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div className='wrapper'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className='card'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Header numTodos={this.state.todos.length}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className='todo-list'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {todoItems}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button todosList={this.state.todos} addTodo={(todo) => this.addTodo(todo)} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}在 的代码中Button.js，您可以通过以下方式获得此函数this.propsexport default class Button extends Component {constructor() {&nbsp; &nbsp; super()&nbsp; &nbsp; this.handleClick = this.handleClick.bind(this)}handleClick() {&nbsp; &nbsp; const text = document.getElementById('text_field');&nbsp; &nbsp; const input = text.value;&nbsp; &nbsp; this.props.addTodo({id: this.props.todosList.length + 1, name: input })&nbsp; &nbsp; console.log(this.props.todosList)}render() {&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className='search-container'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input className='search' type='text' placeholder='type something...' id='text_field'></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className='button-container'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type='submit' className='button-add' onClick={this.handleClick}> New Task </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}