4
我对ReactJS很陌生，我的问题很不寻常，可能仅仅是因为我没有按照他们的意思来实现。React Js组件在状态变化后只渲染一次
所以基本上说，这工作得很好，但我需要添加一些新的功能，以及...好吧，一些东西关闭。
首先 - ConvFrame是顶级组件，在页面的顶部出现，它由ConvForm组件（添加新的查询）ConvList，其中未分配的和新的呼叫去的。 ConvList此处的ID和密钥为1.
下面还有工作人员列表，他们只使用ConvForm，这些字段本身是dropzones，允许快速分配新的呼叫任务。这里的ConvList有Id和Key等于worker的id。
当ConvList被呈现时，它查询服务器列表中的作业。这对所有人都适用。但是，当通过ConvForm添加新项目时，似乎出现了一些奇怪的问题。它调用handleCommentSubmit()功能，来电this.loadCommentsFromServer();（愚蠢的，我知道！），然后设置为记录this.setState({records: data});
当第一个记录添加了/api/zlecenia被调用两次新的状态。一旦从loadCommentsFromServer()里面ConvFrame和第二次从ConvList内。通过表单添加第二条记录调用一次，组件似乎不会对状态变化做出反应。我猜，有些东西实施得不好。
这里的源代码： Conversations.js
//For dragging
var placeholder = document.createElement("div");
placeholder.className = "placeholder";
var dragged;
var over;
/**
* Conversation
* Should be used for listing conversation blocks, adds class based on age of task.
* Detects drag events, renders block, calls dragEnd function to append block to new
* location and uses props.OnDrop function to pass id of element and target id of worker
*/
window.Conversation = React.createClass({
dynamicClass: function() {
return "convo " + this.props.delay;
},
dragStart: function (e) {
dragged = e.currentTarget;
over = null;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("text/html", e.currentTarget);
},
dragEnd: function (e) {
$(dragged).show();
$(placeholder).remove();
console.log(over, over.className);
if (over && over.className === "candrop") {
var id = Number(dragged.dataset.id);
this.props.onDrop({id: id, target: over.id});
over.appendChild(dragged);
}else{
console.log('returning base:' + over);
$(dragged).parent().append(dragged);
}
},
render: function() {
return (
<div draggable="true" data-id={this.props.id} onDragEnd={this.dragEnd} onDragStart={this.dragStart} className={this.dynamicClass()} >
{this.props.children}
</div>
);
}
});
/**
* ConvList
* Displays conversation dropdown list. I should aim to make it single component, do not repeat for workers.
* Detects dragOver for .candrop and place some funny placeholder. Detect position change from Conversation view
* call master class from parent component and pass data. Detect delete event.
*/
window.ConvList = React.createClass({
getInitialState: function() {
return {data: []};
},
loadConvsFromServer: function() {
$.ajax({
url: baseUrl + '/api/zlecenia',
type: 'GET',
data: {id: this.props.id},
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadConvsFromServer();
},
dragOver: function (e) {
e.preventDefault();
$(dragged).fadeOut();
if (e.target.className === "candrop") {
if (e.target.className == "placeholder")
return;
over = e.target;
e.target.appendChild(placeholder, e.target);
}
},
updatePosition: function (data) {
console.log('update convo %d for member %e', data.id, data.target);
$.ajax({
url: baseUrl + '/api/zlecenia',
type: 'PUT',
data: {id: data.id, assign: data.target},
success: function (data) {
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
deleteTask: function (e) {
var taskIndex = parseInt(e.target.value, 10);
console.log('remove task: %d', taskIndex);
$.ajax({
url: baseUrl + '/api/zlecenia/' + taskIndex,
type: 'DELETE',
success: function (data) {
this.loadConvsFromServer();
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="convlist" onDragOver={this.dragOver}>
<div className="candrop" id={this.props.id} >{this.props.id}
{this.state.data.map((c) =>
<Conversation onDrop={this.updatePosition} delay={c.delayTime} id={c.id} key={c.id}>
<p className="convTop">{c.formattedTime} | Tel. {c.phone} | {c.name} | Nr.Rej {c.number}</p>
<p>{c.text}</p>
<button className="deleteConv" onClick={this.deleteTask} value={c.id}>x</button>
</Conversation>
)}
</div>
</div>
);
}
});
/**
* ConvForm
* Displays conversation create form. Prepares fields, validates them.
* Call master function to add new record on send.
*/
var ConvForm = React.createClass({
getInitialState: function() {
return {phone: '', name: '', number: '', text: ''};
},
handlePhoneChange: function (e) {
this.setState({phone: e.target.value});
},
handleNameChange: function (e) {
this.setState({name: e.target.value});
},
handleNumberChange: function (e) {
this.setState({number: e.target.value});
},
handleTextChange: function (e) {
this.setState({text: e.target.value});
},
submitForm: function (e) {
e.preventDefault();
var phone = this.state.phone.trim();
var name = this.state.name.trim();
var number = this.state.number.trim();
var text = this.state.text.trim();
if (!text || !phone || !name || !number) {
return;
}
this.props.onConvSubmit({phone: phone, name: name, number: number, text: text});
this.setState({phone: '', text: '', number: '', name: ''});
},
render: function() {
return (
<form className="convForm" onSubmit={this.submitForm}>
<div className="row">
<div className="col-xs-12 col-md-4">
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Telefon"
value={this.state.phone}
onChange={this.handlePhoneChange}
/>
</div>
</div>
<div className="col-xs-12 col-md-4">
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Imię i nazwisko"
value={this.state.name}
onChange={this.handleNameChange}
/>
</div>
</div>
<div className="col-xs-12 col-md-4">
<div className="form-group">
<input
className="form-control"
type="text"
placeholder="Nr. rejestracyjny"
value={this.state.number}
onChange={this.handleNumberChange}
/>
</div>
</div>
</div>
<div className="form-group">
<textarea
className="form-control"
type="text"
placeholder="Treść"
value={this.state.text}
onChange={this.handleTextChange}
/>
</div>
<input className="btn btn-success" type="submit" value="Zapisz" />
</form>
);
}
});
/**
* ConvFrame
* Conversation main frame and root functions for both form and conversations listing.
*/
window.ConvFrame = React.createClass({
getInitialState: function() {
return {records: []};
},
loadCommentsFromServer: function() {
$.ajax({
url: baseUrl + '/api/zlecenia',
type: 'GET',
data: {id : 1},
success: function (data) {
this.setState({records: data});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
handleCommentSubmit: function (convo) {
$.ajax({
url: baseUrl + '/api/zlecenia',
type: 'POST',
data: convo,
success: function (data) {
this.loadCommentsFromServer();
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="add-new">
<div className="row">
<div className="col-xs-12 col-md-12 frame">
<div className="col-xs-12 col-md-7">
<h3>Dodaj nową rozmowę</h3>
<ConvForm onConvSubmit={this.handleCommentSubmit} />
</div>
<div className="col-xs-12 col-md-5">
<ConvList key='1' id='1' data={this.state.records} />
</div>
</div>
</div>
</div>
);
}
});
workers.js
/**
* WorkerList
*
*/
var Worker = React.createClass({
render: function() {
return (
<div>
{this.props.children}
</div>
);
}
});
/**
* WorkerList
*
*/
var WorkerList = React.createClass({
render: function() {
return (
<div className="worker-list">
{this.props.data.map((worker) =>
<Worker id={worker.id} key={worker.id}>
<div className="row">
<div className="col-xs-12 col-md-12 frame">
<div className="col-xs-12 col-md-5">
<h4>{worker.username}</h4>
</div>
<div className="col-xs-12 col-md-7">
<ConvList key={worker.id} id={worker.id} />
</div>
</div>
</div>
</Worker>
)}
</div>
);
}
});
/**
* WorkerForm
*
*/
var WorkerForm = React.createClass({
render: function() {
return (
<div>
</div>
);
}
});
/**
* WorkerFame
*
*/
window.WorkerFrame = React.createClass({
getInitialState: function() {
return {data: []};
},
loadWorkersFromServer: function() {
$.ajax({
url: baseUrl + '/api/pracownicy',
type: 'GET',
success: function (data) {
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadWorkersFromServer();
},
handleWorkerSubmit: function (worker) {
$.ajax({
url: baseUrl + '/api/pracownicy',
type: 'POST',
data: worker,
success: function (data) {
this.loadWorkersFromServer();
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="add-new">
<div className="row">
<div className="col-xs-12 col-md-12">
<WorkerList data={this.state.data} />
</div>
<div className="col-xs-12 col-md-12">
<WorkerForm onWorkerSubmit={this.handleWorkerSubmit} />
</div>
</div>
</div>
);
}
});
final.js
var DashFrame = React.createClass({
render: function() {
return (
<div>
<ConvFrame/>
<WorkerFrame/>
</div>
);
}
});
ReactDOM.render(
<DashFrame/>,
document.getElementById('dashboard')
);
，将不胜感激任何提示。我的大脑正在沸腾。
你有这样一个plunker页面吗？ –