首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在ReactJS中保存输入默认值

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

Stack Overflow用户
提问于 2019-06-08 06:02:19
回答 1查看 595关注 0票数 0

我正在做我的第一个项目,我发现了另一个问题。我的教授告诉我,我的编辑表单在开始时不能为空,它必须存储默认值。这就是我所做的。不幸的是,我发现它有问题。怎么了?第一件事:*我的默认输入不能改变。第二:*即使我的默认值对我来说是可见的,在POST之后,它也会将"“作为值发送。

我尝试了很多方法,比如从this.state.userResponse.map设置值,但当然失败了。甚至试图避开React并将默认值保存到LocalStorage中,只是为了让它正常工作。

代码语言:javascript
复制
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,似乎我可以再次编辑它,但保存此数据时仍会出现问题。

EN

Stack Overflow用户

发布于 2019-06-08 07:54:57

我建议将状态的值设置为默认值,然后在rb输入组件上使用firstName属性并将其设置为this.state.firstName,同时仍然保留onChange并去掉default属性。

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

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56501681

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档