Question

我正在做我的第一个项目，却发现了另一个问题。我的教授告诉我，我的编辑表单一开始就不能为空，它必须存储默认值。这就是我所做的。可悲的是我发现它有问题。怎么了？第一件事： *我的默认输入无法更改。第二： *即使我的默认值对我可见，在POST之后它也会发送“”作为值。

我尝试了很多事情，例如从this.state.userResponse.map设置值，但是当然失败了。甚至试图逃避React并将默认值保存到LocalStorage中只是为了使其工作。


class EditProtege extends Component {
  state = {
    firstname: "",
    userResponse: []
  };

  getUserByID() {
    fetch(`http://localhost:9000/proteges/${utils.i}`)
      .then(res => res.json())
      .then(res => this.setState({ userResponse: res }))
      .catch(err => err);
  }

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

  handleSubmit = event => {
    event.preventDefault();
    axios
      .put(`http://localhost:9000/proteges/${utils.i}`, {
        firstname: this.state.firstname,
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      });

    window.location.reload();
  };


  componentDidMount() {
    this.getUserByID();
    //this.setDefaultValues();
  }

  render() {
    return (      
      <div className="creation-form">
        {this.state.userResponse.map(resp => (
        <div>
          <br />
          <rb.Form onSubmit={this.handleSubmit}>
            <rb.FormGroup>
              <rb.Row>
                <rb.Col md={12}>
                  <rb.FormControl
                    type="text"
                    name="firstname"
                    size="md"
                    onChange={this.handleNameChange}
                    placeholder="Name"
                    default={this.userResponse.proteges}
                    required
                  />
                </rb.Col>
            </rb.FormGroup>
            <rb.Button type="submit" variant="dark" size="lg" block>
               Zatwierdź edycję
            </rb.Button>
          </rb.FormGroup>
        </rb.Form>
      </div>
      ))}
    </div>
    );
  }
}

export default EditProtege;

就像我之前说过的，我想发布默认值，并且如果需要可以更改它。现在它不可触摸并发送空字符串。

更新：将默认值更改为defaultValue，看来我仍然可以再次对其进行编辑，保存此数据的问题仍然出现。

Answer 1

我建议将状态的firstName设置为默认值，然后在rb输入组件上使用value属性，并将其设置为this.state.firstName，同时仍保持onChange不变，并摆脱默认属性。 / p>

这样，每次更改字段的输入值时，状态将被有效地重置，并且还将更新输入字段的值。当您发送带有当前状态数据的帖子请求时，它也应该是准确的。

如何在ReactJS中保存输入默认值

1 个答案: