Question

我是REACT的新手，我不仅很难弄清onChange事件道具，而且还想弄清楚其他许多道具。它通过的道具就是让我。例如

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

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

REACT应用程序是用纯文本生成的

npx create-react-app test --template typescript

不更改生成的配置文件。

状态被声明为

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

有什么想法吗？

Answer 1

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

Answer 2

首先，欢迎来到令人敬畏的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>
  }
}

Answer 3

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

在tsconfig.json中，我添加了以下compilerOption

  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

失败

{{1}}

在编写REACT onChange时遇到麻烦

3 个答案: