如何通过 React hooks onChange 事件方法传递附加参数

Question

我需要输出修改后的值。假设我正在输入：hello world，我需要这个结果：“hello world”（带引号）。我可以用 class-component 来做，但我用 Hooks 失败了。我的代码有什么问题？const { useState } = React;const App = () => {  const [user, setUser] = useState('');  const onChange = (a, b, event) => {    setUser(a + event.target.value + b);  };  return (    <form>      <h3>Username is: {user}</h3>      <input        type="text"        value={user}        onChange={onChange.bind(null, '"', '"')} />    </form>  );};ReactDOM.render(<App />, document.getElementById("root"));<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Answer 1

问题

由于onChange在每次按键时运行，因此您将quotation标记附加到每个按键。

解决方案

而不是把你的引号放在你的状态上。在 JSX 中附加引号。

import React, { useState } from 'react';

const App = () => {

  const [user, setUser] = useState('');

  const onChange = (event) => {

    setUser(event.target.value)

  };

  return (

    <form>

      <h3>Username is: {user ? `"${user}"`: ''}</h3>

      <input

        type="text"

        value={user}

        onChange={onChange} />

    </form>

  );

};

export default App;

从输入字段传递额外参数

<input

   onChange={e => onChange(e, 'hello, 'world')}

/>

Answer 2

When you use arrow functions there is no need to bind. 

 const   onChange = (val)=>{

    console.log(val)// comment

    }

    <input type="text"

       onChange={() => onChange("comment")}

    />

Answer 3

我使用 coffeescript，你可以将 -> 视为函数或 =>，如果我们通过循环将参数传递给功能组件中的 onClick 事件处理程序：

onClick = (n, x) -> ->

    setcheckindex n

    x()

<Boxr onClick={onClick n, x.onClick} /> for x,n in g

我已经通过 n 发送了循环索引，并通过 x.onClick 发送了一个函数