React中点击按钮后清空Textbox文本框输入内容的实现问题

问题原因 #

你当前的输入框属于非受控组件，仅绑定了占位符placeholder属性，用户输入的内容保存在input元素自身的DOM状态中，和父组件的min2、maxval状态没有关联。你点击重置按钮修改的只是占位符的值，不会影响已经输入的内容，因此看不到清空效果。

解决方案 #

我们需要把输入框改为受控组件，让父组件的状态完全控制输入框的内容，修改分为父组件和子组件两部分：

1. 修改父组件 InputClear #

将状态和占位符拆分，新增子组件输入变化的回调处理，重置时直接清空状态即可：

import { useState } from 'react';
import UserInput from './UserInput';

// 常量定义占位符，避免重复代码
const MIN_PLACEHOLDER = "0...";
const MAX_PLACEHOLDER = "...1000";

const InputClear = () => {
    // 状态存储真实输入值，初始为空自动显示占位符
    const [min2, setMin] = useState("");
    const [maxval, setMax] = useState("");

    const handleClick2 = () => {
        // 直接清空状态即可同步清空子组件输入框
        setMin("");
        setMax("");
    }

    return(
        <nav className="inputclear-list">
            <h3 className="inputclear-list-logo" >
                <u>Perform Queries: </u>
            </h3>
            <UserInput 
                name2=" Ranking " 
                minValue={min2}
                maxValue={maxval}
                minPlaceholder={MIN_PLACEHOLDER}
                maxPlaceholder={MAX_PLACEHOLDER}
                onMinChange={setMin}
                onMaxChange={setMax}
            />

            <br/>
            <button className="button" onClick={handleClick2}> Reset </button>
        </nav>
    );
};

export default InputClear;

2. 修改子组件 UserInput #

绑定输入框的value属性，输入变化时调用父组件传入的回调更新父组件状态：

const UserInput = (props) => {
    return(
        <div className='container'>
            <div className='col'>
                <input 
                    type='text' 
                    placeholder={props.minPlaceholder} 
                    value={props.minValue}
                    onChange={(e) => props.onMinChange(e.target.value)}
                />
            </div>
            <div className="col">&lt;{props.name2}&lt;</div>
            <div className="col">
                <input 
                    type='text' 
                    placeholder={props.maxPlaceholder} 
                    value={props.maxValue}
                    onChange={(e) => props.onMaxChange(e.target.value)}
                />
            </div>
        </div>
    );
};

export default UserInput;

改造完成后，输入框的内容完全由父组件的min2和maxval控制，点击重置按钮清空这两个状态，输入框就会自动清空内容，同时显示初始的占位符，符合你的预期效果。

内容的提问来源于stack exchange，提问作者JustThatGuy93