React - how to target value from a form with onClick-CodePudding

New to react and currently working on a project with a backend. Everything functions correctly apart from targeting the value of user selection.

basically whenever a user enters a number the setId is saved properly to the const with no problems while using the onChange method.

this method would render my page every change on text.

I am trying to save the Id only when the user clicks the button. however, event.target.value does not work with onClick.

I tried using event.currentTarget.value and this does not seem to work.

Code:

  <form onSubmit={handleSubmit}>
                <label>Company ID</label>
                <input value={id} onChange={(e) => setId(e.target.value)} type="number" />
                {/* <button value={id} type="button" onClick={(e) => setId(e.currentTarget.value)}>Search</button> */}
            </form>

Handle Submit:

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(id)
    
}

is there a way of doing this with onclick? since I wouldn't like my component to render on every typo and only once a user has clicked the button.

Componenet:

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>('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(id)
        
    }

    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>
                <input value={id} onChange={(e) => setId(e.target.value)} type="number" />
                {/* <button value={id} type="button" onClick={(e) => setId(e.currentTarget.value)}>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;

Hope I am clear on this.

Thanks.

CodePudding user response：

I'm afraid to say that here onChange is mandatory as we also are interested in the value which we set by setId. onClick can't be used as we can't set the value in the input. Hope I'm clear. Thankyou!

CodePudding user response：

You can turn your input from being a controlled input to an uncontrolled input, and make use of the useRef hook. Basically, remove most of your attributes from the input element, and grab the current value of the input form on click of the button. From there, you can do whatever you want with the input value.

const inputRef = useRef()

...other code

<form onSubmit={handleSubmit}>
  <label>Company ID</label>
  <input type="number" ref={inputRef} />
  <button value={id} type="button" onClick={() => console.log(inputRef.current.value)}>Search</button>
</form>

...other code