社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
私信  •  关注

SUBHAM OJHA

SUBHAM OJHA 最近创建的主题
SUBHAM OJHA 最近回复了
8 年前
回复了 SUBHAM OJHA 创建的主题 » 通过react从MongoDB中检索数据

试试这个,你应该调用你的用户API来获取componentdidmount中注册的用户信息,我还在maskinput标记中添加了默认值的代码,这对你有用。

class Register extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        email: '',
        telephone:''

    }
}
componentDidMount  = () => {
    //call your API and set value in email and telephone
    // Below are the sample code for call API, it will change as per your use
    const myHeaders = new Headers();

    myHeaders.append('x-api-key', 'KEY_HERE');
    myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
    myHeaders.append('cache-control', 'no-cache')

    fetch('URL_HERE', {
        method: 'GET',
        headers: myHeaders,
        async: true,
    }).then(res => res.json())
        .then(json => {
            //check your json response and find email and telephone and then set it to our state
           //Below I have set state, you have to set this state as per your response                  
            this.setState({
                email: json.email,
                telephone: json.telephone,
            })
        });
}

onEmailChange = (event) => {
    this.setState({email: event.target.value})
}

onTelephoneChange = (event) => {
    this.setState({telephone: event.target.value})
}

render () {
return (
  <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-30-l shadow-5 center">  
            <main className="pa4 black-80">
            <div className="measure">
                <fieldset id="email" className="ba b--transparent ph0 mh0">
                    <div className="mt3">
                        <label className="db fw6 lh-copy f6">Email</label>
                        <MaskedInput
                            value={this.state.email} 
                            className="  borderColour pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                            placeholder='john@email.com'
                            id="email"
                            required
                            onChange={this.onEmailChange}
                            /> 
                        <label className="db fw6 lh-copy f6">Zona</label>
                            <div className="mv3">
                        <label className="db fw6 lh-copy f6">Telefone</label>
                        <MaskedInput
                            value={this.state.telephone} 
                            className=" borderColour b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                            placeholder="(41) 99989-0909" 
                            onChange={this.onTelephoneChange}
                            /> 
                    </div>

    </div>
            </div>
        </main>
    </article>

);
}
}