Question

我将Django与React结合使用，并且尝试更新用户个人资料，以下是我尝试过的操作：

constructor(props){
    super(props);

    this.state = {
        username: '',
        fetched_data: {}
    }

async componentDidMount() {
  const token = localStorage.getItem('token');
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  config.headers["Authorization"] = `Token ${token}`;

  await axios.get(API_URL + 'users/api/user/', config)
    .then(res => {
        this.setState({fetched_data: res.data})
    })
}

onInputChange_username(event){
    this.setState({username: event.target.value});
}

<form onSubmit={this.onFormSubmit} >

    <div>
        <label>Username:</label>
        <input
            placeholder="Username"
            className="form-control"
            value={this.state.username ? this.state.username : this.state.fetched_data.username}
            onChange={this.onInputChange_username}
        />
   </div>
</form>

我首先尝试在componentDidMount（）中获取用户数据，然后将其存储在this.state.fetched_data中。在表单中，我尝试将值设置为this.state.username（如果存在）。如果为空字符串，则将其设置为this.state.fetched_data.username。

上面的代码存在的问题是，当我尝试更改用户名中的字段时，我无法完全擦除输入字段中的值。每次该字段为空时，它将重置为this.state.fetched_data.username中的值。我还尝试使用如下所示的defaultValue：

<div>
    <label>Username:</label>
    <input
        placeholder="Username"
        className="form-control"
        defaultValue = {this.state.fetched_data.username}
        value={this.state.username}
        onChange={this.onInputChange_username}
    />

但是它也不起作用，因为它仅在输入字段中显示占位符。我该如何工作？提前致谢。

Answer 1

问题在于您需要在渲染函数中对输入字段的值进行赋值。当您尝试清除该字段的值时，它只会重置为this.state.fetched_data.username，因此您永远无法清除它。

在加载表单时设置初始状态：

componentDidMount() {
    this.setState({
        username: this.state.fetched_data.username,
    });
}

然后在render中设置输入字段的值：

<input 
    value={this.state.username}
    onChange={this.onInputChange_username}
/>

您的onChange处理程序就可以了：

onInputChange_username(event){
    this.setState({username: event.target.value});
}

React默认值未显示在输入字段中

1 个答案: