reactjs 如何在触发onSubmit事件时从表单中提取数据？

7kqas0il 于 2022-11-22 发布在 React

关注(0)|答案(1)|浏览(138)

我正在修改Riot的API，它允许通过玩家的名字来获取玩家的信息。我试图从用户的输入中获取一个API密钥（我只得到了一个24小时密钥）和目标玩家的名字。

export function PlayerSearch() {
    function handlesubmit(e) {
      console.log(e.target);
      e.preventDefault();
    }

    return (
    <div className='player'>
    <div className='inputfield'>
    <form onSubmit={handlesubmit} method='GET' autoComplete="off">
      <div>
        <label htmlFor="key">Your API key:</label>
        <input 
          placeholder='Your API key'
          onFocus={(e)=>{e.target.placeholder=''}}
          type="text" 
          id="key"
          name="key" />
      </div>
      <div>
        <label htmlFor="name">Player name:</label>
        <input 
          placeholder='Player name' 
          onFocus={(e)=>{e.target.placeholder=''}} 
          type="text" 
          id="name" 
          name="name" />
      </div>
      <div>
        <input type='submit' />
      </div> 
    </form>
    </div>
    </div>
    );
}

我在控制台上看到了这个：

那么，我究竟如何从表单中提取这两个输入呢？
此外，我是否可以调用另一个组件，并将数据作为道具传递，以处理提交的数据，从而使代码更清晰？

reactjs

来源：https://stackoverflow.com/questions/74491051/react-how-do-i-extract-data-from-a-form-when-triggering-onsubmit-event

1条答案

按热度按时间

velaa5lx1#

应该有一个状态来存储输入：

const [formData, setFormData] = useState({ key: "", name: "" });

然后，您需要一个函数来更新您的状态，该函数被称为输入字段的onChange：

const onChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
};

您需要将该函数传递给inputonChange属性：

<input
    placeholder="Your API key"
    onFocus={(e) => {
      e.target.placeholder = "";
    }}
    type="text"
    name="key"
    value={formData.key}
    onChange={onChange}
/>

然后，您可以访问handleSubmit中的状态：

function handlesubmit(e) {
    console.log(formData);
    e.preventDefault();
}

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 如何在触发onSubmit事件时从表单中提取数据？

1条答案

相关问题

热门标签

最新问答