我刚开始使用Meteor / React进行项目。
在我的" Customer.jsx"
中Customer = React.createClass({
propTypes: {
//customer: React.PropTypes.object.isRequired
},
getInitialState: function () {
return { customers: [] };
},
mixins: [ReactMeteorData],
deleteThisCustomer(){
Meteor.call("removeCustomer", this.props.customer._id);
},
getMeteorData() {
let query = {};
//query = {checked: {$ne: true}};
return {
customers: Customers.find(query, {sort: {createdAt: -1}}).fetch()
};
},
handleSubmit(event) {
event.preventDefault();
// Find the text field via the React ref
var data = {};
data['first_name']= ReactDOM.findDOMNode(this.refs.customerFirstName).value.trim();
data['last_name'] = ReactDOM.findDOMNode(this.refs.customerFirstName).value.trim();
console.log(data);
Meteor.call("addCustomer", data);
// Clear form
ReactDOM.findDOMNode(this.refs.customerFirstName).value = "";
ReactDOM.findDOMNode(this.refs.customerLastName).value = "";
},
renderCustomers() {
return this.data.customers.map((customer) => {
return <Customer
key={customer._id}
customer={customer.first_name}
/>
});
},
singleCustomer(){
return(
<li className="customerClassName">
<button className="delete" onClick={this.deleteThisCustomer}>
×
</button>
<label>Here{ this.props.customer }</label>
</li>
);
},
render() {
return (
<div className="container">
<header>
<h1>Add new Customer</h1>
<form role="form" className="form-inline" onSubmit={this.handleSubmit} >
<div className="form-group">
<label>First Name</label>
<input type="text" className="form-control" ref="customerFirstName" placeholder="First Name." />
</div>
<div className="form-group">
<label>Last Name</label>
<input type="text" className="form-control" ref="customerLastName" placeholder="Last Name." />
</div>
<button type="submit" className="btn btn-default">Add Customer</button>
</form>
</header>
<ul>
{this.singleCustomer()}
</ul>
</div>
);
}
});
每次尝试添加first_name或last_name时,我都会遇到各种错误。事实上我认为我的render()的整个顺序和结构都是一场噩梦。
有什么想法吗?
任何帮助都将不胜感激。
提前致谢:)