我正在使用React来更轻松地创建表单， 我使用带有jQuery的Ajax进行数据请求。
当我传递$（“＃form”）。serialize（）或{name：$（“ input＃name”）。val}时，Button类中具有“ data”参数，这是Ajax的数据。参数它为空，但是当我传递{name：'MY NAME'}时它就正确了。这是代码中的唯一问题。
我已经直接在 form.js 文件中用$（“＃form”）。serialize（）替换了“ data：this.data”，因此它可以正常工作。
文件：
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form-React</title>
<!--required links-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel" src="js/form.js"></script>
<!--/required links-->
<style type="text/css">
.input,.btn{
padding: 10px 5px;
border: 1px solid #CCC;
outline: none;
}
.input{
border-radius: 7px 0 0 7px;
}
.btn{
border-radius: 0 7px 7px 0;
background-color: #CCC;
color: #FFF;
cursor: pointer;
}
</style>
</head>
<body>
<div style="text-align: center">
<h1>Form</h1>
</div>
<div id="modal-content">
loading...
<script type="text/babel">
var textStyle = {
fontFamily: 'sans-serif'
};
var url = 'test.php';
var method = 'POST';
var data = $("#form").serialize();
var before = () => {
document.title = "loading...";
};
var complete = () => {
document.title = "Form-React";
};
var success = (data) => {
$("#dados").html(data);
};
var error = () => {
$("#dados").html('error');
};
ReactDOM.render(
<Form style={textStyle} id="form">
<Label>
<Input name='name' class='input' placeholder='Name*'/>
</Label>
<Button class='btn'
url={url}
method={method}
data={data}
before={before}
complete={complete}
success={success}
error={error}>
Send
</Button>
</Form>,
document.getElementById('modal-content')
);
</script>
</div>
<p id="dados"></p>
</body>
</html>
js / form.js
class Button extends React.Component{
constructor(props){
super(props);
this.style = this.props.style === undefined ? {} : this.props.style;
this.id = this.props.id === undefined ? '' : this.props.id;
this.class = this.props.class === undefined ? '' : this.props.class;
this.type = this.props.type === undefined ? 'submit' : this.props.type;
if (this.type === "button")
this.type = "submit";
/*FORM ID =>*/this.form = this.props.form === undefined ? '' : this.props.form;
this.url = this.props.url === undefined ? false : this.props.url;
this.method = this.props.method === undefined ? false : this.props.method;
this.data = this.props.data === undefined ? false : this.props.data;
this.beforeFunction = this.props.before === undefined ? () => {alert('loading...')} : this.props.before;
this.completeFunction = this.props.complete === undefined ? () => {alert('loaded')} : this.props.complete;
this.successFunction = this.props.success === undefined ? () => {alert('success')} : this.props.success;
this.errorFunction = this.props.error === undefined ? () => {alert('error')} : this.props.error;
}
send(e){
if (this.type === "submit"){
var beforeFunction = this.beforeFunction,
completeFunction = this.completeFunction,
successFunction = this.successFunction,
errorFunction = this.errorFunction;
$.ajax({
url: this.url,
method: this.method,
data: this.data,
beforeSend: function () {
return beforeFunction();
},
complete: function () {
return completeFunction();
},
success: function (data) {
return successFunction(data);
},
error: function () {
return errorFunction();
}
});
} else {
//SCRIPT TO RESET THE FORM
}
}
render(){
return(
<button type={this.type === "submit" ? 'button' : this.type}
id={this.id}
className={this.class}
style={this.style}
onClick={this.send.bind(this)}>
{this.props.children}
</button>
);
}
}
class Label extends React.Component{
constructor(props){
super(props);
this.style = this.props.style === undefined ? {} : this.props.style;
this.id = this.props.id === undefined ? '' : this.props.id;
this.class = this.props.class === undefined ? '' : this.props.class;
}
render(){
return <label id={this.id} className={this.class} style={this.style}>{this.props.children}</label>;
}
}
class Input extends React.Component{
constructor(props){
super(props);
this.type = this.props.type === undefined ? 'text' : this.props.type;
this.placeholder = this.props.placeholder === undefined ? '' : this.props.placeholder;
this.value = this.props.value === undefined ? '' : this.props.value;
this.state = {
value: this.value,
length: this.value.length
};
this.handleChange = this.handleChange.bind(this);
this.name = this.props.name === undefined ? false : this.props.name;
this.id = this.props.id === undefined ? '' : this.props.id;
this.class = this.props.class === undefined ? '' : this.props.class;
this.style = this.props.style === undefined ? {} : this.props.style;
this.required = this.props.required === undefined ? false : this.props.required;
this.disabled = this.props.disabled === undefined ? false : this.props.disabled;
this.checked = this.props.checked === undefined ? false : this.props.checked;
this.maxlength = this.props.maxlength === undefined ? '' : this.props.maxlength;
this.minlength = this.props.minlength === undefined ? '' : this.props.minlength;
this.max = this.props.max === undefined ? '' : this.props.max;
this.min = this.props.min === undefined ? '' : this.props.min;
this.multiple = this.props.multiple === undefined ? false : this.props.multiple;
}
handleChange(e) {
this.setState({value: e.target.value, length: e.target.value.length});
}
render(){
var disable,
multiple,
checked,
required;
if (!this.name) return <p>Please enter the input name</p>;
if (this.disabled) disable = 'disabled';
if (this.multiple) multiple = 'multiple';
if (this.checked) checked = 'checked';
if (this.required) required = 'required';
return <input type={this.type}
id={this.id}
className={this.class}
style={this.style}
name={this.name}
multiple={this.multiple}
maxLength={this.maxlength}
minLength={this.minlength}
max={this.max}
min={this.min}
disabled={disable}
required={required}
checked={checked}
value={this.state.value}
placeholder={this.placeholder}
onChange={this.handleChange}/>;
}
}
class Form extends React.Component{
constructor(props){
super(props);
this.style = this.props.style === undefined ? {} : this.props.style;
this.id = this.props.id === undefined ? '' : this.props.id;
this.class = this.props.class === undefined ? '' : this.props.class;
}
render(){
return <form id={this.id} className={this.class} style={this.style}>{this.props.children}</form>;
}
}
test.php
<?php
echo "My name is ".$_POST['name'];
?>
我希望您退出My name is NAME_IN_INPUT，但没有成功，输入名称出来了My name is