你能告诉我如何在点击按钮时获取输入字段值吗,我正在使用 react 钩子(Hook)。我想获取 first name
和 lastname
值按钮点击。我已经在我的函数组件中传递了 name
属性。
这是我的 code
import React, { Component, useState } from 'react';
import { render } from 'react-dom';
export default function InputField({name,label}) {
const [state, setState] = useState('')
return (
<div>
<label>{label}</label>
<input type="text"
value={state}
name={name}
onChange={(e) => setState(e.target.value)} />
{state}
</div>
);
}
最佳答案
Use
<form>
tag withuseRef
hook
包装你的 <InputField>
带有 html <form>
的标签标记并使用react ref
在以后。像这样:
import React, { Component, useRef } from 'react'
import { render } from 'react-dom'
import InputField from './inputfield'
import './style.css'
function App () {
const nameForm = useRef(null)
const handleClickEvent = () => {
const form = nameForm.current
alert(`${form['firstname'].value} ${form['lastname'].value}`)
}
return (
<div>
<form ref={nameForm}>
<InputField label={'first name'} name={'firstname'}/>
<InputField label={'last name'} name={'lastname'}/>
</form>
<button onClick={handleClickEvent}>gett value</button>
</div>
)
}
render(<App />, document.getElementById('root'))
关于javascript - 如何在 react 中单击按钮时获取输入字段值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57302715/