Problem with the confirmation button. The Button does not work-CodePudding

I have created a button that saves the entered data, however when I click on it, nothing happens.Here is the code.

   onChange = () => {
        if (this.state.filesContentDict[this.props.iniType]) {
            this.props.changeInitFileParams(this.props.market, this.props.iniType, this.state.filesContentDict[this.props.iniType]);
            this.setState({ isNeedOpenInfoWindow: true });
        }
    }
   <form onSubmit={(e) => {
                    e.preventDefault()
                    this.onChange()
                }}>
                    <div height="200%" style={{
                        margin: '20px 0px 0px 40px'
                    }}><input type="submit" value="Ok" className="c4t-button" height="200%" size="50px" /></div>
                </form>

CodePudding user response：

I think you should change your from onSubmit like this

onsubmit={(event)=> onChange(event)}

then use this code on onChange =>

  const onChange = (event) => {
       e.preventDefault();

       if (this.state.filesContentDict[this.props.iniType]) {
          this.props.changeInitFileParams(this.props.market, this.props.iniType, 
          this.state.filesContentDict[this.props.iniType]);
          this.setState({ isNeedOpenInfoWindow: true });
    }
}

CodePudding user response：

The main reason you getting error because you are not using button. You are using input tag. Change

<button type="submit" className="c4t-button" height="200%" size="50px">Ok</button>

CodePudding user response：

The following similar snippet to your code shows that the alert does run when clicking on the <input type='submit' /> without seeing your code there could be other problems or this.state is not what you think it is within that function (improper scoping or just at the time it is false so it doesn't run what is within the if statement).

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      something: {}
    }
  }

  onConfirm = () => {
    alert('hi');
  }
  render() {
    
    
    return (
        <form
          style={{ background: 'green', height: 300 }}
          onSubmit={(e) => {
            e.preventDefault();
            this.onConfirm();
          }}
         >
          <input type='submit' value='Ok' />
        </form>
    );
  }
}

ReactDOM.render(
<App />,
window.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>