Question

如何使用计算出的属性名称来获得反应中的状态？

我的意思是，一个代码说了1000多个字：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Home extends Component {
  state = {
    name: 'joao',
    age: 18
  }
  set = (s, v) => {
      this.setState({
          [s]: v
      })
  }
  get = (s) => {
    // ---------- <HERE> ----------
    //return this.state.[s];
    // ---------- </HERE> ----------
    // ---------- <INSTEAD OF> ----------
    if(s == 'name') return this.state.name;
    else if(s == 'age') return this.state.age;
    // ---------- </INSTEAD OF> ----------
  }
  render() {
    return(
      <div>
        <h1>Home</h1>
        <button onClick={() => this.set('name', 'maria')}>Change Name</button>
        <button onClick={() => this.set('age', 20)}>Change Age</button>
        <br/>{this.get('name')}
        <br/>{this.get('age')}
        <br/><Link to="/news">Go to NEWS</Link>
      </div>
    );
    };
}

该集合正在工作，但是获取，我仅使用[]就无法获取状态的值这段代码只是一个例子

Answer 1

由于this.state是一个对象，因此您具有多种语法来访问对象的属性，例如：

objectName.property // person.age

objectName [“属性”] //人[“年龄”]

objectName [expression] // x =“ age”;人[x]

您的解决方案将是：


get = (s) => {
    return this.state[s];
  }

or just on JSX

<br/>{this.state.name}
<br/>{this.state.age}

Answer 2

React 不像其他 JavaScript 框架那样具有计算属性，例如Angular 或 Vue，换句话说 React 中没有计算属性，但是我们可以通过使用函数来实现这种行为或效果，一种方法是使用 handleChange() 函数。由于 handleChange() 函数在每次击键时运行以更新 React 状态，因此显示的值将随着用户键入而更新。看看Controlled Component的React。

handleChange(e){
       this.setState({[e.target.id]: e.target.value })
}

如何在React中使用计算属性名称来设置状态

2 个答案: