React中如何点击按钮将输入值传递给父组件？

你当前的实现是在输入框onChange时直接调用父组件的setIpAddress，导致输入内容实时同步到父组件。要改成点击按钮再传递，核心是让子组件先维护自己的输入状态，提交时再把值传给父组件，具体修改如下：

• 引入useState钩子，在子组件内部创建本地状态存储输入值
• 修改输入框的onChange事件，只更新本地状态
• 在表单onSubmit事件中，将本地状态的值传递给父组件，同时可选择清空输入框

修改后的完整代码：

import { useState } from 'react';

const FormInput = ({setIpAddress}) => {     
    const [localIp, setLocalIp] = useState('');
    
    return (
        <div className="formInput">
            <form 
                className="form_container" 
                onSubmit={(e) => {
                    e.preventDefault();
                    // 点击提交时才把本地值传给父组件
                    setIpAddress(localIp);
                    // 可选：提交后清空输入框
                    setLocalIp('');
                }}
            >
                <input 
                    type="text" 
                    id="input" 
                    onChange={(e) => setLocalIp(e.target.value)} 
                    value={localIp} // 绑定本地状态，实现受控组件
                    required={true} 
                    placeholder="Search for any IP address or domain"
                />
                <button type="submit" className="input_btn">
                    <img src={arrow} alt="arrow"/>
                </button>
            </form>
        </div>
    );
};

export default FormInput

关键说明 #

• 子组件通过localIp状态单独管理输入内容，输入过程中不会触发父组件的状态更新
• 只有点击提交按钮时，才会调用setIpAddress将本地输入值传递给父组件
• value={localIp}将输入框设为受控组件，确保输入框的显示内容和本地状态保持一致

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