Question

我正在尝试编写反应代码以将该值提交到后端服务器。我希望用户点击“提交”按钮后立即清除输入字段。

我写了下面的代码，有人可以帮我解决我在这里缺少的东西吗？

class Create extends Component {

    state = {
        task : {
            title: '',
            completed: false
        }
    }
    CreateHandler = (event) => {
        this.setState((state) => {
            return {
                task: {
                    ...state, title: '' // <----- CLEARING HERE (well, trying)
                }
            }
        });
        event.target.value=""; // <----- ALSO HERE 
        event.preventDefault();
        axios({
            method:'post',
            url:'http://localhost:8000/api/task-create',
            data: this.state.task,
            xsrfHeaderName: this.props.CSRFToken
        })
        .then((res) => {
            console.log(res.data);
        })
        this.props.updateState(this.state.task)
    }
    ChangeHandler = (event) => {
        this.setState(state => {
            return {
                task: {
                    ...state, title: event.target.value
                }
            }    
        })
     }

将代码分成几部分，以使其易于阅读。

    render() {
        return (
            <form onSubmit={this.CreateHandler.bind(this)}>
                <div className="header form-group">  
                    <input 
                    className="newItem form-control"
                    onChange={this.ChangeHandler.bind(this)}
                    value={this.state.task.title}
                    />
                    <button 
                        type="submit" 
                        class="saveButton btn btn-primary btn-warning">
                            submit
                    </button>
                </div>
            </form>
        )
    }
}

export default Create;

最终目标是清除输入字段，然后将数据发送到后端django服务器，除了清除输入字段外，此操作已成功完成。

Answer 1

您没有正确更新状态

this.setState((state) => {
            return {
                task: {
                    ...state, title: '' // <----- CLEARING HERE (well, trying)
                }
            }
        });

应该是

this.setState((state) =>({...state, task: {...state.task, title: ''}}))

Answer 2

对于您来说，可以这样完成：

this.setState(previousState => ({
    task: {
        ...previousState.task,
        title: '' // <----- CLEARING HERE
    }
}));

Answer 3

一种更好的编写createHandler方法的方法：

CreateHandler = (event) => {
  // Prevent the default form action
  event.preventDefault();

  // Call your API
  axios({
    method: "post",
    url: "http://localhost:8000/api/task-create",
    data: this.state.task,
    xsrfHeaderName: this.props.CSRFToken,
  }).then((res) => {

    // Request passed
    // Call your prop function
    this.props.updateState(this.state.task);

    // Clear the unnecessary data
    this.setState((prevState) => ({

      // Create new object
      task: {

        // Assign the properties of previous task object
        ...prevState.task,

        // Clear the title field
        title: "",
      },
    }));
  });
};

希望这会有所帮助！

提交后反应输入字段未清空

3 个答案: