如何从子组件 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() {

    super()

    this.state = {

        todos: TodoList

    }

}

addTodo = (todo) => {

  this.setState({ todos: [...this.state.todos, todo] })

}

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 todosList={this.state.todos} addTodo={(todo) => this.addTodo(todo)} />

            </div>

        </div>

    )

}

在 的代码中Button.js，您可以通过以下方式获得此函数this.props

export default class Button extends Component {

constructor() {

    super()

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

}

handleClick() {

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

    const input = text.value;

    this.props.addTodo({id: this.props.todosList.length + 1, name: input })

    console.log(this.props.todosList)

}

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>

    )

}