defaultValue 更改不会重新渲染输入

Java

在前端开发中，我们经常需要处理用户输入的数据，并将其展示在页面上。有时候，我们希望在用户没有输入任何内容时，给输入框设置一个默认值，以提醒用户应该输入什么内容。在React中，我们可以通过设置defaultValue属性来实现这个功能。

Javascript
import React, { useState } from 'react';
function Form() {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputValue);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input</p>        type="text"
        defaultValue="请输入内容"
        onChange={handleInputChange}
      />
      <button type="submit">提交</button>
    </form>
  );
}
export default Form;

Javascript
import React, { useState } from 'react';
function SearchBox() {
  const [searchTerm, setSearchTerm] = useState('');
  const handleInputChange = (e) => {
    setSearchTerm(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('正在搜索：', searchTerm);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input</p>        type="text"
        defaultValue="请输入关键词"
        onChange={handleInputChange}
      />
      <button type="submit">搜索</button>
    </form>
  );
}
export default SearchBox;