我是 ReactJs 新手。我正在使用 ASP.net 和 Reactjs 创建一个 CRUD 应用程序。我已经展示了表格。现在我正在尝试将值从表单插入到表中。请让我知道如何做同样的事情。我已经分享了 Controller 和reactjs代码。
员工 Controller :
[RoutePrefix("api/Employee")]
public class EmployeeController : ApiController
{
EmployeeEntities db = new EmployeeEntities();
[Route("GetEmployeeList")]
public IQueryable<EmployeeTable> GetEmployeeList()
{
return db.EmployeeTables.AsQueryable();
}
[Route("InputEmployee")]
public void InputEmployee()
{
}
}
EmployeeJSX.jsx:
var EmployeeRow = React.createClass({
render: function () {
return(
<tr>
<td>{this.props.item.EmployeeID}</td>
<td>{this.props.item.FirstName}</td>
<td>{this.props.item.LastName}</td>
<td>{this.props.item.Gender}</td>
<td>{this.props.item.Designation}</td>
<td>{this.props.item.Salary}</td>
<td>{this.props.item.City}</td>
<td>{this.props.item.Country}</td>
</tr>
);
}
});
var EmployeeTable = React.createClass({
getInitialState: function(){
return{
result:[]
}
},
componentWillMount: function(){
var xhr = new XMLHttpRequest();
xhr.open('get', this.props.url, true);
xhr.onload = function () {
var response = JSON.parse(xhr.responseText);
this.setState({ result: response });
}.bind(this);
xhr.send();
},
render: function(){
var rows = [];
this.state.result.forEach(function (item) {
rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);
});
return (<table className="table">
<thead>
<tr>
<th>EmployeeID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Gender</th>
<th>Designation</th>
<th>Salary</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>);
}
});
ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />,
document.getElementById('grid'))
输入表单组件:
var InputValues=React.createClass({
handleClick:function(){
this.props.onUserInput(this.refs.firstName.value,this.refs.lastName.value,this.refs.gender.value,this.refs.designation.value,this.refs.salary.value,this.refs.city.value,this.refs.country.value);
},
render:function(){
return(
<div>
<form>
<label id="firstname">First Name </label><br/>
<input type="text" placeholder="Enter First Name" ref="firstName" />
<br/><br/><label id="lastname">Last Name: </label><br/>
<input type="text" placeholder="Enter Last Name" ref="lastName" />
<br/><br/><label id="gender">Gender: </label><br/>
<input type="text" placeholder="Gender" ref="gender" />
<br/><br/><label id="designation">Designation: </label><br/>
<input type="text" placeholder="Enter Designation" ref="designation" />
<br/><br/><label id="salary">Salary: </label><br/>
<input type="number" placeholder="Enter Salary" ref="salary" />
<br/><br/><label id="city">City: </label><br/>
<input type="text" placeholder="Enter City" ref="city" />
<br/><br/><label id="country">City: </label><br/>
<input type="text" placeholder="Enter Country" ref="country" />
<p>
<button type="button" onClick={this.handleClick}>Submit</button>
</p>
</form>
</div>
);
}
});
最佳答案
React 的伟大之处在于它只是 Javascript。
所以您所需要的只是对您的服务器进行 POST!
您可以使用 native fetch函数或完整的库,如 axios
使用两者的示例可以是:
// Using ES7 async/await
const post_data = { firstname: 'blabla', etc....};
const res = await fetch('localhost:3000/post_url', { method: 'POST', body: post_data });
const json = await res.json();
<小时/>
// Using normal promises
const post_data = { firstname: 'blabla', etc....};
fetch('localhost:3000/post_url', { method: 'POST', body: post_data })
.then(function (res) { return res.json(); })
.then(function (json) { console.log(json); };
<小时/>
// AXIOS example straight from their Github
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
关于javascript - 如何在 ReactJS 中发布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47263347/