How to add an onClick or onChange event for an input field inside render?

dushanrandika

I have been struggling to call a function when using input fields inside render method. I could tried out two ways to render data in my React application using back ticks and ReactDOMServer.renderToString but none of the method supported onChange or onClick. Is there a way to accomplish this?

This is a sample code snippet from my app.

 {
        targets: 2,
        title: `<b>${“IsActive”}</b>`,
        className: 'text-center',
        render: {
          _(data) {
            return ReactDOMServer.renderToString(
              <div>
                <input
                  type="checkbox"
                  ref="checkCard"
                  checked={data.value}
                  className="checkbox-lg"
                  onChange={() => console.log(“Clicked” onChange)}
                  onClick={() => console.log("Clicked onClick)}
                />
              </div>
            );
          },
        }
      }

None of these console logs prints on the console.

kthorngren

I'm not sure about React but in general the recommendation is to use delegated events like this example or maybe this non-jquery example.

Kevin