如何在React[复制]中设置函数参数的状态

Question

我传递的名称和值处理函数从子组件。

现在我想将状态设置为与提供的名称匹配的值。但是我不知道如何设置它。

我尝试了这种方式（但它给出了错误-'this.set状态不是一个函数'）：

class ParentComponent extends Component {
constructor(props) {

    super(props);
    this.myRef = React.createRef();
    this.state = {
        loanAmount: 348600.48,
        numberOfYears: 70,
 }
  handleChange(name, value) {  
    this.setState({ name: value },() => {
      this.financeCalcualte();
    });
  }

子组件的代码为：

   onChange = (event) => {   
    const {name, rawValue} = event.target;
    this.props.handleChange(name, rawValue)
   }

设置它的正确语法是什么？

Answer 1

似乎您正在查找计算属性名称

handleChange(name, value) {
    this.setState({ [name]: value },() => {
      this.financeCalcualte();
    });
  }

Answer 2

如果您在基于类的组件中具有此函数，那么您可以将当前函数更新为如下所示的箭头函数。

handleChange = (name, value) => {  
 this.setState({ name: value },() => {
  this.financeCalcualte();
 });
}

问题是您正在访问这个，而没有给出上下文。

另一种方法是将this绑定到函数。下面是在构造函数中以另一种方式执行此操作的示例。

constructor(props) {
 super(props);

 this.handleChange = this.handleChange.bind(this);
 // Other code ....
}

编辑

正如在其他答案和注释中提到的，您必须使用计算属性名，您不能直接使用变量名并将其设置为另一个变量。

this.set状态（{[name]： value}）

Answer 3

要在回调函数中使用此，如注释中所述，必须将其绑定到构造函数中或使用箭头函数。

另外，由于你的name是一个变量，你不能更新你的状态，比如：

this.setState({ name: value }

因为这会在您的状态中创建一个name属性，所以不会更新将name作为传入变量的状态变量。因此，您应该使用计算属性。

handleChange = (name, value) =>
  this.setState({ [name]: value }, () => this.financeCalcualte());