React如何通过onClick获取表单输入值 避免每次输入触发重渲染

完全可以通过onClick实现你的需求，核心思路是放弃受控组件写法，改用非受控组件+useRef读取输入值，避免输入过程中频繁触发state更新导致重渲染。

原有写法错误原因 #

你之前尝试给button绑定value={id}，这个值是组件渲染时的静态固定值，不会随着用户输入实时更新，因此点击时永远只能拿到上一次state更新后的id，无法获取用户最新输入的内容。

修改步骤 #

1. 新增useRef用来绑定输入框DOM，直接读取输入框的实时值
2. 移除input的value绑定和onChange事件，改用ref绑定
3. 在点击按钮/提交表单时，从ref中读取最新输入值再更新id，仅触发一次重渲染

完整修改后代码 #

import { useState, useRef, useEffect } from 'react';
import axios from 'axios';
// 其余导入保持不变

interface GetOneCompanyProps {
    company: CompanyModel;
}

interface RouteParam {
    id: any;
}

interface CompanyById extends RouteComponentProps<RouteParam> {

}

function GetOneCompany(): JSX.Element {
    const [id, setId] = useState('4');
    const [company, setCompany] = useState<any>('');
    // 新增输入框ref
    const inputRef = useRef<HTMLInputElement>(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        // 从ref读取最新输入值
        const newId = inputRef.current?.value || '';
        setId(newId);
        console.log(newId);
    }

    async function send() {
        try {
            const response = await axios.get<CompanyModel>(globals.adminUrls.getOneCompany + id)
            store.dispatch(oneCompanyAction(response.data));
            console.log(response);
            const company = response.data;
            setCompany(company)
        } catch (err) {
            notify.error(err);
        }
    }

    useEffect(() => {
        send();
    }, [id]);

    return (
        <div className="getOneCompany">
            <h1>hi  </h1>
            <form onSubmit={handleSubmit}>
                <label>Company ID</label>
                {/* 移除value和onChange，添加ref和defaultValue保留初始默认值 */}
                <input ref={inputRef} defaultValue="4" type="number" />
                <button type="submit">Search</button>
                <!-- 若不想用form提交，也可以单独绑定onClick：
                <button type="button" onClick={() => {
                  const newId = inputRef.current?.value || '';
                  setId(newId);
                }}>Search</button>
                -->
            </form>
            
            <div className="top">
            </div>
            <br/>
            Company: {id}
            <br/>
            Client Type: {company.clientType}
            <br/>
            Company Name: {company.name}
            <br/>
            Email Adress: {company.email}
            <br/>
        </div>
    );
}

export default GetOneCompany;

补充说明 #

如果不需要组件初始化就默认请求id为4的公司数据，可以删除useState('4')的默认值，同时去掉input的defaultValue="4"属性即可。

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