在编写 REACT onChange 时遇到问题答案

【问题标题】：Having trouble coding a REACT onChange在编写 REACT onChange 时遇到问题
【发布时间】：2020-09-15 18:47:18
【问题描述】：

我是 REACT 的新手，我在试图弄清楚 onChange 事件道具以及许多其他事件道具时都遇到了麻烦。它正在传递的道具让我着迷。例如

handleSubmit(e) {
  let s = this.state;
  s.data[e.target.name] = e.target.value;
  this.setState(s);
}

它在我见过的几乎所有示例（函数的声明）中都是这样给出的，并且总是抱怨函数 def 中的 e 隐含为“任何”类型。如果我将它声明为 e:any 它会停止抱怨，但是我无法让 s.data[e.target.name] 工作，因为它说我不能将“任何”类型作为索引。我无法弄清楚它是如何声明的，或者我在某处是否有配置问题。如果我将 e.target.name 替换为像“myarray”这样的字符串常量，它会起作用。

REACT 应用是用一个普通的

npx create-react-app test --template typescript

不更改生成的配置文件。

状态被声明为

state = {
  data: { fldName: 'something', anotherField: 'somethingelse'}
}

有什么想法吗？

【问题讨论】：

这能回答你的问题吗？ typesafe select onChange event using reactjs and typescript
这是另一个问题，但是你正在改变这段代码中的状态 state.data[...] = ...，你不应该这样做：reactjs.org/docs/react-component.html#state
cbr，这是有道理的，我有点想像这样。是否有地方记录了这些标准事件类型，因为我找不到任何东西。
弗洛里安，是的，我知道你不打算改变状态，这就是为什么我复制了它，然后使用了 setState，但我猜我已经这样做了有 s 指向状态而不是拥有它的副本，或者您指的是我的初始化。这是在类定义内部但在函数外部完成的。这不是初始化状态的正确方法吗？

标签： reactjs

【解决方案1】：

尝试将let s = this.state; 更改为let s = Object.assign({}, this.state);。如果您正在更改它而不是复制它，那将是它可能无法正常工作的原因。您可能还需要做s.data = { ...s.data, [e.target.name]: e.target.value }，这与s.data 做同样的事情，我通常保持我的状态不变。

【讨论】：

感谢您的帮助。这似乎有所帮助，但我现在开始认为事件在我将初始值分配给状态之前被调用。如果我测试 e.target.name 的值以确保它包含有效值，那么代码就可以工作。

【解决方案2】：

首先，欢迎来到很棒的 React 世界。

建议：您可以在票证中包含您在代码中使用的 React 版本。

您似乎在使用旧的 React 版本，因为现在我们有了 React 钩子，允许我们使用 useState 和其他有趣的东西。

这是 React 钩子文档：https://reactjs.org/docs/hooks-intro.html

与你的问题有关，我认为你应该看看 setState 文档：https://reactjs.org/docs/react-component.html#setstate

setState 方法接收一个提供更新状态的函数，下面我包含了一个使用您的代码的小示例，这样您可以确保您正在更新正确状态的状态。

class TestComponent extends React.Component {
  constructor() {
    this.state = {
      test: true,
      data: {},
    };
  }

  handleSubmit(e) {
    this.setState((state) => ({
      ...state,
      data: {
        ...state.data,
        [e.target.name]: e.target.value,
      },
    }));
  }

  render(){
      return <div>Test</div>
  }
}

【讨论】：

【解决方案3】：

我终于找到了我的问题（或者至少是如何让我的示例工作）。

在 tsconfig.json 我添加了以下 compilerOption

"suppressImplicitAnyIndexErrors": true

这段代码现在可以工作了

  upd = (e:React.ChangeEvent<HTMLSelectElement>) => {
    let qq = Object.assign({}, this.state);
    qq.frm[e.target.name] = e.target.value;
    this.setState(qq);
  }

之前的行在哪里

qq.frm[e.target.name] = e.target.value;

说失败了

Parameter 'e' implicitly has an 'any' type. TS7006

【讨论】：