javascript - 改变国家的特定财产

Question

我正在学习 ReactJS，不用说我是一个绝对的初学者！我正在尝试更改属于状态的对象数组中的特定属性。每个对象都有两个属性：name和active。默认情况下，活动值是 false。当我单击该项目时，我想将此项目的活动值更改为 true。

我的数组显示在列表元素内，每个列表元素都有onClick={() => props.onChangeSelected(lang.name)}方法。onChangeSleceted方法进入handleChangeSelected(name)函数，但是，我不知道在这个函数中写什么。

  class Loading extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          text: 'Loading'
        };
      }
      componentDidMount() {
        const stopper = this.state.text + '...';

        this.interval = window.setInterval(() => {
          this.state.text === stopper
            ? this.setState(() => ({ text: 'Loading' }))
            : this.setState((prevState) => ({ text: prevState.text + '.' }))
        }, 300)
      }
      componentWillUnmount() {
        window.clearInterval(this.interval);
      }
      render() {
        return (
          <p>
            {this.state.text}
          </p>
        )
      }
    }

    function LanguageList (props) {
      return (
          <div>
          <h3>Choose your favorite:</h3>
          <ul>
          {props.list.map((lang) => (
            <li key={lang.name} onClick={() => props.onChangeSelected(lang.name)}>
            <span>{lang.name}</span>
            </li>
            ))}
          </ul>
          </div>
        )
    }

 class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          languages: [
            {
              name: 'all',
              active: true
            },

            {
              name: 'javascript',
              active: false
            },

            {
              name: 'ruby',
              active: false
            },
            {
              name: 'python',
              active: false
            }

          ]
        }

        this.handleChangeSelected = this.handleChangeSelected.bind(this)
      }

      handleChangeSelected(name) {
         this.setState((currentState) => {
             const lang = currentState.languages.find((lang) => lang.name === name)
             return {}
         })
      }

    render() {
        return (
          <div>
            <LanguageList 
            list={this.state.languages}
            onChangeSelected={this.handleChangeSelected}
            />
          </div>
        )
      }
    }

    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>

标签： javascriptreactjs

Answer 1

尝试这个？

handleChangeSelected(name){

    // Find matching element in state
    var temp = this.state.languages;

    for (var i = 0; i < temp.length; i++){
        if (temp[i]["name"] === name){
            temp[i]["active"] = true;
        }
    }

    this.setState({
        languages: temp
    });
}

如React 文档中所列，他们建议在调用函数时创建一个新对象setState。这当然是在谈论更新函数语法 ( this.setState((prevState, props) => {return {...};});)，我假设相同的逻辑应用于上面使用的语法（将对象传递到设置状态）

[setState] 的第一个参数是一个带有签名的更新函数：

(prevState, props) => stateChange

(prevState, props) => stateChange prevState 是对前一个状态的引用。它不应该被直接变异。相反，应该通过基于来自 prevState 和 props 的输入构建一个新对象来表示更改。