![](/img/trans.png)
[英]Make button. Click Button. DIV with table turns and faces user, but does not work
[英]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.