ByteSettlement ByteSettlement - 1 month ago 9
React JSX Question

Error in changing the value state of input box

My input box is not editable when I try to edit the value in it.

I am not sure if my onChange event is being used properly to change the value of the input.

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>
);
}
}

Answer

Your <input/> should be a controlled component as your are using value prop.

Try this

 <input onChange={this.onChange.bind(this)} value={this.state.value || text} focus="focused"/>

And add an empty state to your constructor

constructor(props) {
    super();
    this.state = {}
}
Comments