在输入字段中调用数组值
calling array value into input field
在这里,我的应用程序在点击编辑按钮,输入字段出现与保存按钮。它基本上是一个todo应用程序,我要做的是编辑输入的值。当我单击编辑按钮时,相应的todo的值应该存储在我要编辑的输入字段中。我在存储各自的值面临的问题。我的代码是这样的:
class App extends React.Component {
constructor(){
super();
this.state={
todo:[],
editing:false
};
};
entertodo(keypress){
var Todo=this.refs.inputodo.value;
if( keypress.charCode == 13 )
{
this.setState({
todo: this.state.todo.concat({Value:Todo, checked:false})
});
this.refs.inputodo.value=null;
};
};
todo(todo,i){
return (
<li className={todo.checked===true? 'line':'newtodo'}>
<div onClick={this.todoCompleted.bind(this, i)}>
<input type="checkbox" className="option-input checkbox" checked={todo.checked} />
<button onClick={this.edit.bind(this,i)}>edit</button>
<div key={todo.id} className="item">
{todo.Value}
<span className="destroy" onClick={this.remove.bind(this, i)}>X</span>
</div>
</div>
</li>
);
};
remove(i){
this.state.todo.splice(i,1)
this.setState({todo:this.state.todo})
};
todoCompleted(i){
var todo=this.state.todo;
todo[i].checked =todo[i].checked? false:true;
this.setState({
todo:this.state.todo
});
};
allCompleted=()=>{
var todo = this.state.todo;
var _this = this
todo.forEach(function(item) {
item.className = _this.state.finished ? "newtodo" : "line"
item.checked = !_this.state.finished
})
this.setState({todo: todo, finished: !this.state.finished})
};
edit(i){
var todo= this.state.todo
this.setState({
editing:true
});
};
save(i){
this.setState({
editing:false
});
};
rendernormal() {
return (
<div>
<h1 id='heading'>todos</h1>
<div className="lines"></div>
<div>
<input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
<span onClick={this.allCompleted}id="all">^</span>
</div>
<div className="mainapp">
<ul className="decor">
{this.state.todo.map(this.todo.bind(this))}
</ul>
</div>
</div>
);
};
renderform(todo,i) {
return (
<div>
<h1 id='heading'>todos</h1>
<div className="lines"></div>
<div>
<input type="text" ref= "inputodo" value={this.props.todo} placeholder='EDIT TODO'/>
<span onClick={this.allCompleted}id="all">^</span>
<button onClick={this.save.bind(this)}>save</button>
</div>
<div className="mainapp">
<ul className="decor">
{this.state.todo.map(this.todo.bind(this))}
</ul>
</div>
</div>
);
};
render(){
if (this.state.editing) {
return this.renderform()
}
else {
return this.rendernormal()
}
};
}
ReactDOM.render(<App/>,document.getElementById('app'));
.line {
text-decoration: line-through;
color: red;
}
.newtodo{
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>
你可以在组件状态中存储"current value",并将其传递给表单的输入。当切换编辑模式时,只需更新state的值。试一试:
注意:
我使用了一种"hack"的方式从状态中克隆对象数组以实现不变性。你最好使用像这样更高级的工具。
class App extends React.Component {
constructor(){
super();
this.state={
todo:[],
editing:false,
value: '',
current: null,
};
};
entertodo(keypress){
var Todo=this.refs.inputodo.value;
if( keypress.charCode == 13 )
{
this.setState({
todo: this.state.todo.concat({Value:Todo, checked:false})
});
this.refs.inputodo.value=null;
};
};
todo(todo,i){
return (
<li className={todo.checked===true? 'line':'newtodo'}>
<div onClick={this.todoCompleted.bind(this, i)}>
<input type="checkbox" className="option-input checkbox" checked={todo.checked} />
<button onClick={this.edit.bind(this,i)}>edit</button>
<div key={todo.id} className="item">
{todo.Value}
<span className="destroy" onClick={this.remove.bind(this, i)}>X</span>
</div>
</div>
</li>
);
};
remove(i){
this.state.todo.splice(i,1)
this.setState({todo:this.state.todo})
};
todoCompleted(i){
var todo=this.state.todo;
todo[i].checked =todo[i].checked? false:true;
this.setState({
todo:this.state.todo
});
};
allCompleted=()=>{
var todo = this.state.todo;
var _this = this
todo.forEach(function(item) {
item.className = _this.state.finished ? "newtodo" : "line"
item.checked = !_this.state.finished
})
this.setState({todo: todo, finished: !this.state.finished})
};
changeValue(e) {
this.setState({
value: this.state.value = e.target.value
});
}
edit(i){
var todo= this.state.todo
this.setState({
editing:true,
value: this.state.todo[i].Value,
current: i
});
};
save(i){
var clonedTodo = JSON.parse(JSON.stringify(this.state.todo));
clonedTodo[this.state.current].Value = this.state.value;
this.setState({
editing:false,
todo: clonedTodo
});
};
rendernormal() {
return (
<div>
<h1 id='heading'>todos</h1>
<div className="lines"></div>
<div>
<input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/>
<span onClick={this.allCompleted}id="all">^</span>
</div>
<div className="mainapp">
<ul className="decor">
{this.state.todo.map(this.todo.bind(this))}
</ul>
</div>
</div>
);
};
renderform(todo,i) {
return (
<div>
<h1 id='heading'>todos</h1>
<div className="lines"></div>
<div>
<input type="text" onChange={this.changeValue.bind(this)} ref="inputodo" value={this.state.value} placeholder='EDIT TODO'/>
<span onClick={this.allCompleted}id="all">^</span>
<button onClick={this.save.bind(this)}>save</button>
</div>
<div className="mainapp">
<ul className="decor">
{this.state.todo.map(this.todo.bind(this))}
</ul>
</div>
</div>
);
};
render(){
if (this.state.editing) {
return this.renderform()
}
else {
return this.rendernormal()
}
};
}
ReactDOM.render(<App/>,document.getElementById('app'));
.line {
text-decoration: line-through;
color: red;
}
.newtodo{
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>
相关文章:
- 为什么从数组调用时收到非法调用
- JavaScript:从数组调用函数
- 可以将定义的变量放入数组调用中
- 使用包含参数数组的数组调用函数,而不是仅列出数组
- Javascript:从对象数组调用函数
- 下划线:对引发错误的数组数组调用 _.sample
- Javascript 从数组调用对象方法
- 在 Javascript 中使用 setTimeout 从数组调用函数
- 是什么导致我的绘制数组调用无效操作
- 使用变量数组调用函数
- Javasctipt 从数组调用对象的函数
- AngularJS多维数组调用ng repeat
- 如果使用参数数组调用,则日期会更改结果
- 将对象分配给数组,然后根据位置从数组调用它
- 可观察数组——调用webservice列出所有记录并将其绑定到一个表
- 如何从对象数组调用键数组
- 从数组调用函数
- 我可以/应该通过数组调用firebaseRef.set吗
- 数组调用返回未定义
- 从数组调用 JSON 属性