[英]Problem with the confirmation button. The Button does not work
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>
I think you should change your from onSubmit like this我认为你应该像这样改变你的 onSubmit
onsubmit={(event)=> onChange(event)}
then use this code on onChange =>然后在 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 });
}
}
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>
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).以下与您的代码类似的代码片段显示,当您点击
<input type='submit' />
而没有看到您的代码时,警报确实会运行,可能存在其他问题,或者 this.state 不是您认为的 function (范围界定不当或只是当时它是false
的,因此它不会运行 if 语句中的内容)。
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.我建议你有一个
else {
用于你称为onChange
的事件处理程序:这样你就可以看到它是否被触发,例如你似乎正在等待一个名为json=
的道具被填充,也许当你尝试点击时它不是. You might consider disabling the button until this.props.json
is there.在
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>
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.我觉得有点奇怪(但我不确定你的道具的确切情况是什么)你似乎将 changeInitFileParams 发送到外部/父 React 组件,然后将这个孩子的 state 更改为
isNeedOpenInfoWindow
它会如果父级需要运行changeInitFileParams
,则在大多数情况下将 state 更改为父级更有意义。
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.此处不显示任何不起作用的内容:我最怀疑
json={neverBeingDefined}
或 isNeedOpenInfoWindow 在此组件的 state 与父组件上。 (Assuming the render(){
method returns that form
and some sort window that needs the state: isNeedOpenInfoWindow
. (假设
render(){
方法返回该form
和某种需要 state: isNeedOpenInfoWindow
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.