如何在react-redux中調用函數

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}表示組件中的所有道具都傳遞給input元素，請參閱spread屬性以便進一步閱讀。

例如，

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

將InputComponent所有道具（在本例中為type和placeholder）傳遞給input元素，這在創建通用/更智能容器時非常有用。