как очистить входное значение после установки состояния в реакции?

Я делаю приложение todo в реакции, и после получения ввода от пользователя при отправке я делаю почтовый запрос для обновления в базе данных, а затем обновляю состояние. а затем я пытаюсь очистить поле ввода, используя e.target.value = "". Но это не работает. Я довольно новичок в JS и React. может кто-нибудь указать мне, что я делаю неправильно здесь.

class TodoApp extends Component {
    constructor(props) {
        super(props);

        this.state = {
            todos: [],
        };`enter code here

        this.handleTodos = this.handleTodos.bind(this);
        this.handleLogout = this.handleLogout.bind(this);
        this.removeTodo = this.removeTodo.bind(this);
    };

    componentDidMount() {

        const authStr = 'Bearer ' + getJWTToken();

        axios.get('/tasks', {
            'headers': {
                'Authorization': authStr
            }
        }).then(res => {
            // console.log(res.data);
            this.setState({
                todos: res.data,
            })
        }).catch(err => {
            console.log(err);
        });

    };

    removeTodo = id => {
        //  console.log(id)

        const authStr = 'Bearer ' + getJWTToken();

        axios.delete('/tasks/' + id, {
            'headers': {
                'Authorization': authStr
            }
        }).then(res => {
            // console.log(res.data);
            let newTodos = [...this.state.todos];

            newTodos = newTodos.filter(todo => {
                return todo._id !== id;
            });

            //Update the State
            this.setState({
                todos: newTodos
            });
        }).catch(err => {
            console.log(err);
        });

    };

    handleTodos = e => {

        e.preventDefault();
        const authStr = 'Bearer ' + getJWTToken();

        var todo = {
            description: e.target.value
        }

        console.log(todo)

        axios.post('/tasks', todo, {
            'headers': {
                'Authorization': authStr
            }
        }).then(res => {
            // console.log(res.data);
            this.setState({
                todos: this.state.todos.concat(res.data)
            })
        }).catch(err => {
            console.log(err)
        });

        e.target.value = "";
        // console.log(todo);
    };

    handleLogout() {
        localStorage.removeItem('jwtToken');
        this.props.history.push("/");
    }

    render() {

        const listLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 },
            },
          };      

        return (
            <div className="container-fluid App">
                <div className="todoContainer">
                    <Header
                        handleLogout={this.handleLogout}
                    />

                    <h1 style={{ paddingTop: "10px" }}>TODO App</h1>

                    <Input
                        placeholder="What needs to be done?"
                        onPressEnter={this.handleTodos}
                    />

                    <List
                        itemLayout="horizontal"
                        locale={{ emptyText: "No Todos" }}
                        dataSource={this.state.todos}
                        renderItem={item => (
                            <TodoItem
                                todo={item}
                                removeTodo={this.removeTodo}
                            />
                        )}
                    />

                </div>
            </div>
        );
    };

};

export default TodoApp;

reactjs
person Hemanth Kishore    schedule 22.04.2019    source источник
comment
Вы можете очистить значение поля, установив состояние для этого поля ввода, или вы можете использовать ref для ввода.   -  person karthik    schedule 22.04.2019

Ответы (4)


arrow_upward
0
arrow_downward

Значение вашего поля ввода должно быть привязано к вашему состоянию, чтобы правильно им управлять. Вы можете изменить свою декларацию состояния следующим образом:

this.state = {
    todos: [],
    whatToDo: ""
}

и привяжите свое поле ввода к своему состоянию следующим образом:

<Input
    placeholder="What needs to be done?"
    onPressEnter={this.handleTodos}
    value={this.state.whatToDo}
    onChange={this.onInputChange} // will update the state on each change
/>

затем создайте функцию onInputChange:

onInputChange= (event, data) => {
    this.setState({ whatToDo: data.value });
}

и, наконец, измените строку

e.target.value = "";

to 

this.setState({ whatToDo: "" });
person Joshua Zabala    schedule 22.04.2019
comment
это потрясающе - person Manav Mandal; 22.04.2019

arrow_upward
0
arrow_downward

попробуй это,

  handleTodos = e => {

        e.preventDefault();
        const authStr = 'Bearer ' + getJWTToken();

        var todo = {
            description: e.target.value
        }

        console.log(todo)

        axios.post('/tasks', todo, {
            'headers': {
                'Authorization': authStr
            }
        }).then(res => {
            // console.log(res.data);
            this.setState({
                todos: this.state.todos.concat(res.data)
            })
        }).catch(err => {
            console.log(err)
        });
        //RESET FIELD
        e.target.reset()
    };
person sathish kumar    schedule 22.04.2019

arrow_upward
0
arrow_downward

Вы можете использовать Refs для очистки вводимого текста. Это рабочее решение. Кроме того, перейдите по этой ссылке Reactjs, чтобы узнать больше. Информация.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      inputField: ""
    };
  }
  keyHandler = event => {
    if (event.key === "Enter") {
      console.log(this.inputRef.current.value);
      this.setState({ inputField: event.target.value });
      this.inputRef.current.value = "";
    }
  };
  render() {
    return (
      <div>
        <input
          type="text"
          onKeyPress={this.keyHandler}
          ref={this.inputRef}
        />
        <p>{this.state.inputField}</p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

person Avinash Mahlawat    schedule 22.04.2019

arrow_upward
0
arrow_downward

Позвольте мне сказать вам, что это не реагирующий способ работы, вообще говоря, с входными данными. Я мог бы также попытаться исправить вашу ошибку, но я предпочитаю направить вас на правильный путь. Взгляните на эту страницу документа: https://reactjs.org/docs/forms.html

В частности, этот ответ stackoverflow: Что такое контролируемые и неконтролируемые компоненты в ReactJS ?

Используя контролируемые компоненты, чтобы очистить поле ввода, вы просто вызываете setState, очищая содержимое определенной переменной состояния. Пожалуйста, взгляните на пример, который я собираюсь написать:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  handleChange = (event) => {
    this.setState({value: event.target.value});
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  emptyInput = () => {
    alert('Emptying input');
    this.setState({ value: '' });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
        <button onClick={emptyInput}>Empty input</button>
      </form>
    );
  }
}
person Giacomo Cerquone    schedule 22.04.2019