Question

我是react-redux的新手。现在我正在研究react-redux项目。我想在输入标签中输入更改时调用函数。为此我在

中应用“onchange”事件

 <input {...this.props}  onchange="this.callHandler(this.value)"/>

onchange事件处理程序调用函数“callHandler”，定义为

 callHandler = (value) => {
      console.log("value in input",value);
 }

我不知道为什么不调用这个功能我对此组件的完整代码是：

import React from 'react';

type PropsType = {
};

export default class InputComponent extends React.Component<void, PropsType, void> {
     callHandler = (value) => {
          console.log("value in input",value);
     }
  render() {
       console.log("InputComponent props",this.props);
    const inputStyle = this.props.inputStyle;
    return (
      <input {...this.props}  onchange="this.callHandler(this.value)"/>
    );
  }
}

我也不知道为什么我们使用{... this.props} 提前谢谢。

Answer 1

道具是onChange而不是onchange。 onChange需要一个函数，而不是字符串

onChange={this.callHandler}

this.callHandler = event => {
  console.log('value', event.target.value)
}

callHandler传递了一个事件，您可以通过执行event.target.value来获取事件目标的值，如上所述。

{...this.props}表示组件中的所有道具都传递给输入元素，请参阅spread attributes以进一步阅读。

例如，

<InputComponent type="text" placeholder="foobar" />

将InputComponent（在本例中为type和placeholder）的所有道具传递给input元素，这在创建通用/智能容器时非常有用。

如何在react-redux中调用函数

1 个答案: