在React

时间:2017-03-03 17:11:21

标签: javascript jquery html reactjs axios

我正在尝试在React中创建一个编辑表单。我可以成功查询我的数据库,并可以看到数据是我的get请求后的预期。然后我想在我的组件上设置各种属性的状态,以便填写我的表单,然后我可以编辑它。

这是我的反应组件

 constructor(props) {
        super(props);
        this.state = {
            name: '',
            teamName: '',
            bio: '',
            teamId: '',
            uploadedFileCloudinaryUrl: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }

    componentDidMount() {
           this.findPlayerById(this.props.params.id)
    }

    findPlayerById(playerId) {
        axios.get("/api/player/" + playerId)
            .then(res => {
                const player = res.data;
                console.log(player);
                this.setState({
                    name: player.name,
                    teamName: player.teamName,
                    bio: player.bio,
                    teamId: player.teamId,
                    uploadedFileCloudinaryUrl: player.profileImageUrl
                });
            });
    }

这是我呈现的HTML

<div className="form-group">
    <label className="control-label">Name</label>
           <input type="text" className="form-control" ref="name"
                  defaultValue={this.state.name}
                  onChange={this.handleChange.bind(this, 'name')}/>
</div>

我没有得到任何错误,但我认为国家没有在我的承诺中正确设置。我做错了吗?

0 个答案:

没有答案