更改输入框的值状态时出错

时间:2016-10-28 17:04:12

标签: javascript reactjs flux reactjs-flux

当我尝试编辑其中的值时,我的输入框无法编辑。

我不确定我的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>
    );
  }
}

2 个答案:

答案 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: ''
};

将此添加到最后,您应该确保输入始终受控