CODEWITHSUNDEEP
javascriptreactjs
Usaid
Usaid

Reputation: 13

ReactJS onClick does not work for the button, the function inside onClick is not called

This is the button tag and onclick function :

<Button
  id="save-btn"
  className="btn-save"
  disabled={true}
  onClick={handleSaveBtnClick}
  >
   Save
</Button>

const handleSaveBtnClick = () => {console.log("testing")}

I'm using another button to enable/disable this button, this is the code for that button:

  const handleEditClick = (index) => {
// this is for input fields and it works fine:
        document.querySelectorAll(".card-" + index + " .toggle-edit-input").forEach((field) => {
          field.disabled = !field.disabled;
        });
// this piece of code does not work: 
       document.getElementById("save-btn").disabled = false;
        if (document.getElementById("save-btn").disabled = false) {
          document.getElementById("save-btn").onclick = handleSaveBtnClick;
        }
 };

if I remove the disabled option then the button works fine but I need it to be disabled unless edit button is clicked. what could be wrong here ? I have tried most of the methods

Upvotes: 0

Views: 176

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074028

Your enable/disable code isn't how you do this with React. Instead of directly manipulating the DOM, you use a flag in your state for the component that determines whether the button is enabled, and you set / clear that flag. When your component renders, render the disabled attribute using the flag, like this (I used button rather than Button, not knowing which of the several libs you're using that gives you a Button component):

const {useState} = React;

function Example() {
    const [saveEnabled, setSaveEnabled] = useState(true);

    const handleSaveBtnClick = () => {
        console.log("testing");
    };

    return (
        <div>
            <div>
                <button
                    id="save-btn"
                    className="btn-save"
                    disabled={!saveEnabled}
                    onClick={handleSaveBtnClick}
                >
                   Save
                </button>
            </div>
            <div>
                <label>
                    <input
                        type="checkbox"
                        checked={saveEnabled}
                        onClick={() => setSaveEnabled(f => !f)}
                    />
                    Save enabled
                </label>
            </div>
        </div>
    );
}

ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>

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

Obviously, the "Save enabled" checkbox there is just so you can see what happens when the flag is set/cleared. The key things are:

  • The saveEnabled state flag
  • Using disabled={!saveEnabled} in Button (button)

Upvotes: 3

Mellgood
Mellgood

Reputation: 325

You can also use the "old" but good class component approach instead of functional one as suggested before.

In this case you will need something like this:

class Example extends React.Component {
  state = {enabled: false}


  handleSaveBtnClick = () => {
    console.log("testing");
  };

  handleEnableBtnClick = () => {
    console.log(this.state);
    let newStatus = !this.state.enabled
    this.setState({ enabled: newStatus })
  }

  render() {
    return (
      <div>
        <div>
          <button
            id="save-btn"
            className="btn-save"
            disabled={!this.state.enabled}
            onClick={this.handleSaveBtnClick}
          >
            Save
                </button>
        </div>
        <div>
          <label>
            <input type="checkbox" checked={this.state.enabled} onClick={this.handleEnableBtnClick} />
                    Save enabled
                </label>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: -1

Related Questions