当我尝试编辑其中的值时,我的输入框无法编辑。
我不确定我的onChange事件是否正确用于更改输入的值。
import React from "react";
import * as TodoActions from "../actions/TodoActions";
import TodoStore from "../stores/TodoStore";
export default class Todo extends React.Component {
constructor(props) {
super();
}
deleteTodo() {
TodoActions.deleteTodo(this.props.id);
}
toggleEdit() {
TodoActions.toggleEdit(this.props.id);
}
updateTodo() {
TodoActions.updateTodo(this.props.text);
}
toggleComplete() {
TodoActions.toggleComplete(this.props.id);
}
onChange(e) {
console.log('e.taget.value: '+ e.target.value);
this.setState({
value: e.target.value
});
console.log(value);
}
render() {
const buttonStyle = { margin: "5px" };
const { complete, edit, text, id } = this.props;
const icon = complete ? "\u2714" : "\u2716"
if (edit) {
return (
<li>
<form onSubmit={this.updateTodo.bind(this)}>
<input onChange={this.onChange.bind(this)} value={text} focus="focused"/>
<button onClick={this.toggleEdit.bind(this)} class="btn btn-default btn-sm" style={buttonStyle}>Cancel</button>
<button onClick={this.updateTodo.bind(this)} class="btn btn-success btn-sm" style={buttonStyle}>Update</button>
</form>
</li>
);
}
return (
<li>
<span>{text}</span>
<span onClick={this.toggleComplete.bind(this)} class="btn btn-default btn-xs" style={buttonStyle}>{icon}</span>
<button onClick={this.toggleEdit.bind(this)} class="btn btn-primary btn-sm" style={buttonStyle}>Edit</button>
<button onClick={this.deleteTodo.bind(this)} class="btn btn-danger btn-sm" style={buttonStyle}>Delete</button>
</li>
);
}
}
答案 0 :(得分:1)
您的<input/>
应该是受控制的组件,因为您正在使用value
道具。
试试这个
<input onChange={this.onChange.bind(this)} value={this.state.value || text} focus="focused"/>
并在constructor
constructor(props) {
super();
this.state = {}
}
答案 1 :(得分:0)
如果未设置text
属性,则将其作为null
传递给输入,这相当于根本不传递它。在这种情况下,输入呈现为不受控制的,您无法通过道具更改其值。
在这种情况下,最好的方法是为您的属性设置默认值,以确保它至少是一个空字符串:
Todo.defaultProps = {
text: ''
};
将此添加到最后,您应该确保输入始终受控。