Problem with the confirmation button. The Button does not work

Question

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

class DefinesPagePresenter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isNeedOpenInfoWindow: false,
            filesContentDict: {
                [props.iniType]: props.json
            }
        };
    }

   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>

Answer 1

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 });
    }
}

Answer 2

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>

Answer 3

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).

I suggest you have an else { for the event Handler which you called onChange : so you can see if that's triggered for example it seems like you are waiting for a prop named json= to be filled in and maybe it is not when you try clicking. You might consider disabling the button until this.props.json is there.

onChange = () => {
        if (this.state.filesContentDict[this.props.iniType]) {
            //also make sure this method is actually running
            console.log('about to run: changeInitFileParams')
            this.props.changeInitFileParams(this.props.market, this.props.iniType, this.state.filesContentDict[this.props.iniType]);
            this.setState({ isNeedOpenInfoWindow: true });
        }
        else {
          alert('JSON Was not yet loaded')
        }
    }

 class App extends React.Component { constructor(props) { super(props); this.state = { isNeedOpenInfoWindow: false, filesContentDict: { [props.iniType]: props.json } }; } onConfirm = () => { if (this.state.filesContentDict[this.props.iniType]) { this.props.alertInputs(JSON.stringify({ statement: this.state.filesContentDict[this.props.iniType].statement, iniType: this.props.iniType }, null, 4)) this.setState({ isNeedOpenInfoWindow: true }, console.log) // should reflect the state immediately after change } else { alert('false') } } render() { return ( <form style={{ background: 'green', height: 300 }} onSubmit={(e) => { e.preventDefault(); this.onConfirm(); }} > <input type='submit' value='Ok' /> {this.state.isNeedOpenInfoWindow && <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '6rem' }}> <div> iniType:<br /> statement: <br /> </div> <div> {this.props.iniType} <br /> {this.state.filesContentDict[this.props.iniType].statement} </div> </div> } </form> ); } } ReactDOM.render( <App iniType='load' alertInputs={inputs => alert(inputs)} json={{ statement: 'The quick Brown Fox jumped over the lazy dog,' }} />. 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>

I find it a bit strange (but I'm not sure what the exact situation is with your props) that it seems like you send the changeInitFileParams to an outer/parent React Component and then change the state of this child to isNeedOpenInfoWindow it would make more sense to change that state to the parent in most situations if the parent needs the changeInitFileParams to run.

In short nothing is not going to work with any of the code you're actually shown (I proved that it works all the functions get called) and the alert shows up. Whatever is not working is not displayed here: I'd be most suspicious about json={neverBeingDefined} or isNeedOpenInfoWindow being on this Component's state vs on the parent. (Assuming the render(){ method returns that form and some sort window that needs the state: isNeedOpenInfoWindow .