5
我無法在反應中顯示/隱藏某些元素。基本上，我有一個li的動態列表，在li中，我有一個標籤，當你點擊li時我想隱藏標籤並顯示一個輸入。通常用jQuery很容易，因爲如何在反應中動態顯示/隱藏項目列表
$('#element').hide() $('#element2').show()
我不太瞭解如何與我目前的佈局
class EntriesTable extends React.Component {
constructor(props) {
super(props);
console.log(this.props.plannerId);
this.state = {
tasks: [],
plannerId: this.props.plannerId,
};
var state = this.state;
}
componentDidMount() {
this.getTasks(this.state.plannerId);
}
EditTask(id) {
console.log(id);
var spanEl = id + 'taskSpan';
var inputEl = id + 'taskInput';
//hide this span
//show input
$(spanEl).hide();
$(inputEl).show();
//when save
//hide input
//update task
//show span
}
updateTask(id, name) {
$.ajax({
type: "GET",
url: "/Task/Update",
data: { id: id, name: name },
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
//this.setState({ tasks: data.ReturnObject, loading: false });
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}
});
}
createTask(name) {
//make api call to create planner here.
var data = {
Name: name,
PlannerId: model.plannerId,
Status: "Not Complete",
Description: "",
Affiliation: "",
Footprint: "",
Created: new Date(),
Modified: null,
};
$.ajax({
type: "POST",
url: "/Task/Add",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
this.getTasks(model.plannerId);
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}
});
}
getTasks(id) {
this.setState({ tasks: [], loading: true });
$.ajax({
type: "GET",
url: "/Task/GetAll",
data: { id: id },
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
this.setState({ tasks: data.ReturnObject, loading: false });
}.bind(this),
error: function (xhr, status, err) {
console.log(err);
}
});
}
render() {
const tasks = this.state.tasks.map((task) => {
var spanId = task.Id + "taskSpan";
var inputId = task.Id + "taskInput";
return (
<li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}>
<div className="pull-left" style={{width: '50%'}}>
<span id={spanId} onClick={this.EditTask.bind(this, task.Id) }>{task.Name}</span>
<input id={inputId} type="text" style={{ display: 'none' } } />
</div>
<div className="pull-right" style={{marginTop: '-5px', width: '50%'}}>
<div className="pull-right">
<button className="btn btn-default">Add</button>
<button className="btn btn-default">Edit</button>
</div>
</div>
</li>
);
});
return (
<div className="table-wrapper">
<div className="task-container">
<h3>{this.props.rowName}</h3>
</div>
<ul id="tasksContainer">
{tasks}
<li className="list-group-item list-group-item-last"><input type="button" value="Add Task" onClick={this.addTask.bind(this)} className="btn btn-success btn-override" /></li>
</ul>
</div>
);
}
};實現這個我也看其他SO的，告訴你使用一個變量，然後通過改變變量來顯示/隱藏，但我不確定這是否適合我的需要，因爲我有一個動態列表，它不僅僅是一個單一的元素，我是tr要顯示或隱藏。
你需要給我們正在呈現這個列表中的反應成分... – aray12
我意思是說，我可以這樣做，但不確定它與問題的關係。我爲HTML的外觀提供了HTML代碼片段。我有一個跨度和輸入。我只想知道顯示/隱藏元素的首選反應方式。它只是通過jQuery來做，還是有什麼特別的反應？ – jdmdevdotnet
這是jsx不是html。而反應的方式是隱藏/顯示基於某些道具或狀態的東西。我們無法幫助您在沒有整個組件的情況下構建它 – aray12