How to call a function from outside in react through the click event-CodePudding

I want to call the function Optionscheck, which is inside the Form function through click event written inside the other function Newfield

Code:

import React from 'react';

const Newfield= () => {
    
    <div className="form-check" id="">
              <input className="form-check-input" type="checkbox" value="" id="options-check" onClick={Optionscheck} />
              <label className="form-check-label" >
              Options
              </lable>
       </div>
}



export default const Form = () => {
      
      const Optionscheck = () => {

            console.log("Trigger!");
      }

    return(
    
    <div className="form">
        <input className="form-control" type="text" />
    </div>
     <Newfield />
    );
}

CodePudding user response：

You pass the function down through the component's props.

Note: I've changed Optionscheck to camel-case, and fixed a typo in your HTML (</label> not </lable>).

function Form() {

  function optionsCheck() {
    console.log('Trigger!');
  }

  // We add a property called `optionsCheck` to `NewField`
  // which holds the `optionsCheck` function
  return (
    <div>
      <div className="form">
        <input
          className="form-control"
          type="text"
        />
      </div>
      <Newfield optionsCheck={optionsCheck} />
    </div>
  );

}

// We destructure the function from the props
// and assign it to the `onChange` listener on the checkbox
// When the checkbox is changed the function will be called
function Newfield({ optionsCheck }) {
  return (
    <div className="form-check">
      <label className="form-check-label" >
        Options
        <input
          className="form-check-input"
          type="checkbox"
          onChange={optionsCheck}
        />
      </label>
    </div>
  );
}

ReactDOM.render(
  <Form />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

You could simply pass the function as props in the newfield component, and then simply use it in the function

CodePudding user response：

New field is expecting a props which is onClick. onClick should be a function, so when Div is click, it call onClick function.

Passing OptionsCheck function as a props in onClick, whenever Div will be clicked OptionsCheck will be called. get more idea from here

import React from 'react';

const Newfield= ({onClick}) => {

<div onClick={onClick} className="form-check" id="">
          <input className="form-check-input" type="checkbox" value="" id="options-check" onClick={Optionscheck} />
          <label className="form-check-label" >
          Options
          </label>
   </div>
}



  export default const Form = () => {
  
  const Optionscheck = () => {

        console.log("Trigger!");
  }

return(

<div className="form">
    <input className="form-control" type="text" />
</div>
 <Newfield onClick={OptionsCheck}/>
);
}