首頁猿問如何通過 React hooks...

如何通過 React hooks onChange 事件方法傳遞附加參數

JavaScript

蕪湖不蕪 2023-03-24 14:08:08

我需要輸出修改后的值。假設我正在輸入：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>

查看完整描述

3 回答

牛魔王的故事

TA貢獻1830條經驗獲得超3個贊

問題

由于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')}

反對回復 2023-03-24

手掌心

TA貢獻1942條經驗獲得超3個贊

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

const onChange = (val)=>{

console.log(val)// comment

}

<input type="text"

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

反對回復 2023-03-24

慕斯王

TA貢獻1864條經驗獲得超2個贊

我使用 coffeescript，你可以將 -> 視為函數或 =>，如果我們通過循環將參數傳遞給功能組件中的 onClick 事件處理程序：

onClick = (n, x) -> ->

setcheckindex n

x()

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

我已經通過 n 發送了循環索引，并通過 x.onClick 發送了一個函數

反對回復 2023-03-24

3 回答
0 關注
182 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何通過 React hooks onChange 事件方法傳遞附加參數

如何通過 React hooks onChange 事件方法傳遞附加參數

3 回答

添加回答