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>

are you sure this.state.filesContentDict[this.props.iniType] is true? Might be better to show some more of the overall class here. Also, might be recommended to use hooks. — Zargold, Mar 23 '22 at 16:04

score 0 · Answer 1 · answered Mar 23 '22 at 16:09

0

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

answered Mar 23 '22 at 16:09

mohsen Ghalandar

130
9

in react you use onSubmit rather than `onsubmit` as you might with pure HTML. and it makes no difference if he chooses to preventDefault within the onSubmit function or the "`onChange`" function. It might look worse, but it has no real difference to functionality. – Zargold Mar 23 '22 at 16:11
I should use `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 }); } }` instead my `onChange = () => { if (this.state.filesContentDict[this.props.iniType]) `......? – zeratul314 Mar 24 '22 at 09:16

score 0 · Answer 2 · answered Mar 23 '22 at 16:12

0

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>

answered Mar 23 '22 at 16:12

vichakshan

1

https://stackoverflow.com/questions/7117639/input-type-submit-vs-button-tag-are-they-interchangeable `` should be interchangeable with `` – Zargold Mar 23 '22 at 16:16

Zargold · Accepted Answer · 2022-03-24T15:29:49.440

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.

Problem with the confirmation button. The Button does not work

3 Answers3