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

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 发送了一个函数