5
反応中の特定の要素の表示/非表示に問題があります。基本的に、私は李のダイナミックなリストを持っています、そして李の中に私はラベルを持っています、あなたが李をクリックすると、私はラベルを隠して、入力を表示したいです。通常、jQueryを使って、それは私が他のSOの教えてくれた見た私は私の現在のレイアウト反応中のアイテムのリストを動的に表示/非表示する方法
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>
);
}
};でこれを実現する方法は非常に理解していないよ
$('#element').hide() $('#element2').show()
ほど簡単ですあなたは変数を使用して、変数を変更することによって表示/非表示にすることができますが、私はそれが単なる要素ではない動的なリストを持っているので、表示または非表示にします。
... – aray12
Iつまり、私はそれをすることができますが、それがどのように問題に関係しているかはわかりません。私は、HTMLがどのように見えるかのHTMLスニペットを提供しました。私はスパンと入力を持っています。私は単に要素を表示/非表示の好ましい反応方法が何であるかを知りたいだけです。それは単にjqueryを介してやっているのですか、それとも特別な反応がありますか？ – jdmdevdotnet
これはjsxではなくhtmlです。そして反応の方法は、何らかの支柱または状態に基づいて何かを隠すか、または何かを表示することです。そして、コンポーネント全体を使わずにそれを構成するのを手助けすることはできません。 – aray12