如何在reactJs中點擊按鈕值？

Question

我有一個按鈕，我在 reactJs 中使用功能組件，我想在點擊時獲得按鈕值，我怎樣才能得到這個？

我的代碼：-

 const Forms = () => { const handleClick =(event) =>{ const getSameValue = event.target.value console.log(getSameValue); } return ( <button onClick={handleClick}>Test</button> ); };

感謝您的努力！

Answer 1

您正在做的大部分工作都會起作用，盡管您想要currentTarget ，而不是target （如果您的button在其文本周圍有一個span ，您會看到差異），但是您的button沒有任何value屬性，因此它的值為"" 。 一個的值input或button經由訪問value屬性（以及可選地，對於某些種類的input ， valueAsNumber或valueAsDate ）。 您的按鈕有文本內容，但沒有價值。

 const Forms = () => { const handleClick =( event) => { const theValue = event.currentTarget.value; console.log("the value:", theValue); const theText = event.currentTarget.textContent; console.log("the text: ", theText); }; return ( <button value="this is the value" onClick={handleClick}>Test</button> ); }; ReactDOM.render(<Forms />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 2

您必須在按鈕標簽上定義一個“值”屬性，例如：

<button value='button value' onClick={handleClick}>Test</button>

Answer 3

您應該為按鈕組件添加一個value屬性，並使用鈎子或狀態來設置值並在整個函數/類中訪問它。

給按鈕添加value屬性：

<button value="someVal" onClick={handleClick}>Test</button>

使用鈎子創建和存儲按鈕值

const [btn,btnVal] = useState("")

手柄點擊

const handleClick =(event) =>{
    const getSameValue = event.currentTarget.value
    btnVal(getSameValue)
  }

對於基於類的組件：

export default class App extends React.Component {
  //const [count, setCount] = useState("");
 constructor(){
  super()
  this.state={
    val:""
  }
 }

 handleClick = (event) =>{
  this.setState({val:event.currentTarget.value})
 }

 render(){
  return (
    <div>
      <p>Button value: {this.state.val}</p>
      <button value="abcd" onClick={this.handleClick}>
        Click me
      </button>
    </div>
  );
  }
}

此外，您可以使用 state 或 hook 變量直接訪問按鈕的值。