Question

当我通过触发子元素中的函数来单击它时，我想要更改文本的颜色，这样它会影响父元素的状态 - 因为特定的父状态属性确定文本是一种颜色还是另一个。

我知道在子节点中触发的函数会反馈到父节点，因为我可以正确地获取父节点到console.log。但是，我似乎无法改变国家财产。

PS。我想使用＆＃34;（prevState）=＆gt;＆＃34;如果这是适用的

父

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      tasks
    }
  }
  ...
  toggleTask(taskToToggle) {
    const foundTask = tasks.find(task => task.name === taskToToggle.name)

    foundTask.isComplete !== foundTask.isComplete;

    this.setState({ tasks: this.state.tasks })
  }
  ...

儿童

return (
      <div key={name} style={taskStyle} onClick={this.handleToggleComplete.bind(this)}>
        {name}
      </div>

    )

handleToggleComplete() {
    const taskToToggle = this.props;
    this.props.toggleTask(taskToToggle);
  }

Answer 1

您将返回相同的数组和任务对象。

因此，当前状态tasks与包含相同对象的下一个状态tasks是相同的数组。

您需要使用Array.prototype.map

返回另一个数组

 toggleTask(taskToToggle) {
    this.setState(({tasks}) => ({
      tasks: tasks.map(task => 
        task.name === taskToToggle.name ? {...task, isComplete: !task.isComplete} : task)
    }))
  }

Answer 2

在您的孩子onClick中

传递this.props.toggleTask并将任务的名称直接绑定到它，如：

onClick={this.props.toggleTask.bind(name)}

并且在函数的Parent中不要使用taskToToggle.name但只是＆＃34; name＆＃34; ：

const foundTask = tasks.find(task => task.name === name)

或者您可以完全改变功能，使其更容易：

toggleTask(name){
  const updated = tasks.map(task => {
    if(task.name === name){
       task.isComplete = !task.isComplete
    }
   return task
  })
this.setState({tasks: updated})
}

Answer 3

我认为你需要在分配状态之前计算最终状态

改变你的

this.setState({ tasks: this.state.tasks }) //doesn't change anything

到

let finalState = Object.assign({}, ...this.state.tasks, foundTask)
this.setState({ tasks: finalState }) //new object gets assigned to state

Answer 4

@Chris指出我的n00bish错误是正确的。

from functools import partial
cmds.checkBox(onCommand=partial(func_without_parenthesizes, arg, arg))

应该是

foundTask.isComplete !== foundTask.isComplete

这现在有效。

单击子项时无法更改状态属性 - React

4 个答案: