1

我有一个包含对象数组的状态对象：

this.state = {
  feeling: [
    { name: 'alert', status: false },
    { name: 'calm', status: false },
    { name: 'creative', status: false },
    { name: 'productive', status: false },
    { name: 'relaxed', status: false },
    { name: 'sleepy', status: false },
    { name: 'uplifted', status: false }
  ]
}

我想status在单击事件时将布尔值从 true 切换为 false。我将此函数构建为单击处理程序，但它不会将事件连接到状态更改：

buttonToggle = (event) => {
  event.persist();
  const value = !event.target.value

  this.setState( prevState => ({
    status: !prevState.status
  }))
}

我很难跟踪嵌套 React 状态更改的控制流，以及活动事件如何从处理程序跳转到状态对象，反之亦然。

整个组件：

export default class StatePractice extends React.Component {

  constructor() {
    super();
    this.state = {
      feeling: [
        { name: 'alert', status: false },
        { name: 'calm', status: false },
        { name: 'creative', status: false },
        { name: 'productive', status: false },
        { name: 'relaxed', status: false },
        { name: 'sleepy', status: false },
        { name: 'uplifted', status: false }
      ]
    }
  }

  buttonToggle = (event) => {
    event.persist();
    const value = !event.target.value

    this.setState( prevState => ({
      status: !prevState.status
    }))
  }



  render() {
    return (  
      <div>
        { this.state.feeling.map(
            (stateObj, index) => { 
              return <button 
                key={ index }
                onClick={ this.buttonToggle } 
                value={ stateObj.status } >
                  { stateObj.status.toString() }
                </button>
            }
          )
        }
      </div>
    )
  }
}
4

3 回答 3

2

为了解决您的问题，您应该首先将要修改的元素的索引发送到您的切换功能：

onClick = {this.buttonToggle(index)}

然后调整函数以接收索引和事件。

现在，要修改您的状态数组，复制它，更改您要查找的值，然后将其放回您的状态：

buttonToggle = index => event => {
    event.persist();
    const feeling = [...this.state.feeling]; //Copy your array
    feeling[index] = !feeling[index];
    this.setState({ feeling }); 
}

您还可以使用slice复制您的数组，甚至直接发送一个mapped只更改一个值的数组。

于 2019-01-22T20:54:01.667 回答
1

在反应状态对象中更新嵌套对象很棘手。您必须从临时变量的状态中获取整个对象，更新该变量中的值，然后用更新的变量替换状态。为此，您的 buttonToggle 函数需要知道按下了哪个按钮。

return <button 
  key={ index }
  onClick={ (event) => this.buttonToggle(event, stateObj.name) } 
  value={ stateObj.status } >
    { stateObj.status.toString() }
  </button>

你的 buttonToggle 函数可能看起来像这样

buttonToggle = (event, name) => {
  event.persist();

  let { feeling } = this.state;
    let newFeeling = [];

  for (let index in feeling) {
    let feel = feeling[index];
    if (feel.name == name) {
        feel = {name: feel.name, status: !feel.status};
    }
    newFeeling.push(feel);
  }

  this.setState({
    feeling: newFeeling,
  });
}

这是一个有效的 JSFiddle。

或者，如果您不需要为每个感觉存储比“名称”和“状态”更多的数据，您可以像这样重写您的组件状态：

 feeling: {
    alert: false,
    calm: false,
    creative: false,
    etc...
  }

和按钮切换：

 buttonToggle = (event, name) => {
   event.persist();
   let { feeling } = this.state;
   feeling[name] = !feeling[name];
   this.setState({
    feeling
   });
 }
于 2019-01-22T21:03:49.007 回答
0

我认为您需要在获取事件时更新整个数组。最好不要改变现有状态。我会推荐以下代码

export default class StatePractice extends React.Component {
  constructor() {
    super();
    this.state = {
      feeling: [
        { name: "alert", status: false },
        { name: "calm", status: false },
        { name: "creative", status: false },
        { name: "productive", status: false },
        { name: "relaxed", status: false },
        { name: "sleepy", status: false },
        { name: "uplifted", status: false },
      ],
    };
  }

  buttonToggle = (index, value) => (event) => {
    event.persist();
    const toUpdate = { ...this.state.feeling[index], status: !value };
    const feeling = [...this.state.feeling];
    feeling.splice(index, 1, toUpdate);
    this.setState({
      feeling,
    });
  };

  render() {
    return (
      <div>
        {this.state.feeling.map((stateObj, index) => {
          return (
            <button
              key={index}
              onClick={this.buttonToggle(index, stateObj.status)}
              value={stateObj.status}
            >
              {stateObj.status.toString()}
            </button>
          );
        })}
      </div>
    );
  }
}
于 2019-01-22T21:07:11.463 回答