首页 > 解决方案 > 为什么输入中的默认值是在键盘上键入任何按钮后设置的

问题描述

我在我的应用程序中有一个输入,我试图使用函数设置一个默认值,然后将该值发送到服务器。仅当我单击键盘上的任何按钮时才设置该值。如果我不这样做,则 value 为空,我无法将其发送到服务器。我想在不单击任何内容的情况下设置该默认值。任何想法?

输入是:

<div>
  <input 
    className="form-control"
    name="frequency"
    value={this.state.frequency}
    onChange={this.handleConstFrequency}
    placeholder={'30'}
  />
</div>

handleConstFrequency 函数:

 handleConstFrequency = () => {
    this.setState({ frequency: '30' })
  }

标签: javascripthtmlreactjs

解决方案


您可以使用 React Hooks 并定义您的状态,然后对其进行更新。

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

export default function App() {
  const [frequency, setFrequency] = useState(20);

  const handleConstFrequency = (e) => {
    setFrequency("30"); // Or override with value e.target.value
  };

  return (
    <>
      <div>
        <input
          className="form-control"
          name="frequency"
          value={frequency}
          onChange={handleConstFrequency}
          placeholder={"20"}
        />
      </div>
    </>
  );
}


推荐阅读