0
私はReactを使用してプロジェクトを進めていますが、私はまだフレームワークを初めて使っていることに注意してください。React JS TriggerのすべてのボタンonSubmit
私は、管理者が自分のスキルを追加できるフォームを作成していますが、このフォームには多くのボタンが含まれており、どのボタンでもonSubmitイベントが発生します。
これを克服する方法はありますか？ここ
は自分のフォームにコードされ：
TL; DRのみフォームにコードが最終断片で存在します。
var Textbox = React.createClass({
getInitialState: function() {
return {
value: ''
};
},
changeValue: function(event) {
this.setState({
value: event.target.value
});
console.log(this.state.value);
},
render: function() {
return (<
div >
<
label > {
this.props.children
} < /label> <
input type = "text"
ref = "input"
id = "textbox"
value = {
this.state.value
}
onChange = {
this.changeValue
}
/> </
div >
);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>var Numbox = React.createClass({
getInitialState: function() {
return {
value: ''
};
},
changeValue: function(event) {
this.setState({
value: event.target.value
});
console.log(this.state.value);
},
render: function() {
return (<
div >
<
label > {
this.props.children
} < /label> <
input type = "number"
ref = "input"
id = "textbox"
value = {
this.state.value
}
onChange = {
this.changeValue
}
/> <
/div>
);
}
});
var RatingDropdown = React.createClass({
getInitialState: function() {
return ({
value: 'Level 5'
});
},
handleChange: function(event) {
this.setState({
value: event.target.value
});
},
render: function() {
return (<
div >
<
label > Rating: < /label> <
select value = {
this.state.value
}
onChange = {
this.handleChange
}
id = "optionbox" >
<
option value = "1" > Rating 1 < /option> <
option value = "2" > Rating 2 < /option> <
option value = "3" > Rating 3 < /option> <
option value = "4" > Rating 4 < /option> <
option value = "5" > Rating 5 < /option> <
option value = "6" > Rating 6 < /option> <
option value = "7" > Rating 7 < /option> <
option value = "8" > Rating 8 < /option> <
option value = "9" > Rating 9 < /option> <
option value = "10" > Rating 10 < /option> <
option value = "11" > Rating 11 < /option> <
option value = "12" > Rating 12 < /option> <
/select> <
/div>
)
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>var Prereq = React.createClass({
getInitialState: function() {
return {
editing: false
};
},
edit: function() {
this.setState({
editing: true
});
},
save: function() {
var val = this.refs.input.value;
this.props.updatePrereqText(this.refs.input.value, this.props.index)
console.log(val);
this.setState({
editing: false
});
},
remove: function() {
this.props.removePrereqText(this.props.index);
},
renderNormal: function() {
return (<
div >
<
label > idPrerequisite_Skill: < /label> <
div > {
this.props.children
} < /div> <
button onClick = {
this.edit
} > Edit < /button> <
button onClick = {
this.remove
} > Delete < /button> <
/div>
);
},
renderForm: function() {
return (<
div >
<
label > idPrerequisite_Skill: < /label> <
input type = "number"
ref = "input"
defaultValue = {
this.props.children
}
/> <
button onClick = {
this.save
} > save < /button> <
/div>
);
},
render: function() {
if (this.state.editing) {
return this.renderForm();
} else {
return this.renderNormal();
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>var PrereqCollection = React.createClass({
getInitialState: function() {
return {
prerequisites: []
}
},
addPrereq: function(text) {
var temp = this.state.prerequisites;
temp.push(text);
this.setState({
prerequisites: temp
});
},
removePrereq: function(i) {
console.log('Removing Prereq: ' + i);
var temp = this.state.prerequisites;
temp.splice(i, 1);
this.setState({
prerequisites: temp
});
},
updatePrereq: function(newText, i) {
console.log('Updating Prereq: ' + i);
var temp = this.state.prerequisites;
temp[i] = newText;
this.setState({
prerequisites: temp
});
},
eachPrereq: function(text, i) {
return (<
Prereq key = {
i
}
index = {
i
}
updatePrereqText = {
this.updatePrereq
}
removePrereqText = {
this.removePrereq
} > {
text
} < /Prereq>);
},
render: function() {
return (<
div >
<
label > Prerequisites: < /label> <
button onClick = {
this.addPrereq.bind(null, '1')
} > Add < /button> {
this.state.prerequisites.map(this.eachPrereq)
} <
/div>
);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>var Form = React.createClass({
handleSubmit: function(evt) {
alert('An essay was submitted: ');
evt.preventDefault();
},
render: function() {
return (<
form onSubmit = {
this.handleSubmit.bind(this)
} >
<
Textbox > Name: < /Textbox> <
RatingDropdown > Rating: < /RatingDropdown> <
Numbox > idParent_Skill: < /Numbox> <
PrereqCollection/>
<
input type = "submit"
value = "Submit"/>
<
/form>
);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
他のボタンのタイプを「ボタン」として指定してみてください。 '' –