为什么在输入键盘上的任何按钮后设置默认值

Question

I have an input in my app where I'm trying to set a default value using function and later send that value to the server. The value is set only when I click any button from the keyboard. If I don't do that, value is empty and I can't send it to the server. I want to set that default value without clicking anything. Any idea?

The input is:

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

handleConstFrequency function:

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

Answer 1

You could use React Hooks and define your state and then update it.

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>
    </>
  );
}