繁体   English   中英

确认按钮有问题。 按钮不起作用

[英]Problem with the confirmation button. The Button does not work

我创建了一个按钮来保存输入的数据,但是当我点击它时,没有任何反应。这是代码。

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>

我认为你应该像这样改变你的 onSubmit

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

然后在 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 });
    }
}

你得到错误的主要原因是你没有使用按钮。 您正在使用输入标签。 改变

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

以下与您的代码类似的代码片段显示,当您点击<input type='submit' />而没有看到您的代码时,警报确实会运行,可能存在其他问题,或者 this.state 不是您认为的 function (范围界定不当或只是当时它是false的,因此它不会运行 if 语句中的内容)。

我建议你有一个else {用于你称为onChange的事件处理程序:这样你就可以看到它是否被触发,例如你似乎正在等待一个名为json=的道具被填充,也许当你尝试点击时它不是. this.props.json出现之前,您可能会考虑禁用该按钮。

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>

我觉得有点奇怪(但我不确定你的道具的确切情况是什么)你似乎将 changeInitFileParams 发送到外部/父 React 组件,然后将这个孩子的 state 更改为isNeedOpenInfoWindow它会如果父级需要运行changeInitFileParams ,则在大多数情况下将 state 更改为父级更有意义。

简而言之,您实际显示的任何代码都不会起作用(我证明它可以调用所有函数)并且会显示警报。 此处不显示任何不起作用的内容:我最怀疑json={neverBeingDefined}或 isNeedOpenInfoWindow 在此组件的 state 与父组件上。 (假设render(){方法返回该form和某种需要 state: isNeedOpenInfoWindow

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM