在获取请求时自动设置输入值

Question

我把我的问题告诉你

在下面的代码中，我试图从 API 中检索电话号码，然后将它们显示在卡片中；在每张卡片中，我都有不同的数字显示

而且在每张卡片中，我都有一个输入字段来输入我之前获得的电话号码。

我的问题是我不想用恢复的号码手动填写输入。

所以基本上我想启动我的功能而不必手动填写此字段。

你知道怎么做吗？ 我试图简化代码，使其尽可能清晰 感谢您的帮助内夫

 import React, { Component } from 'react';
 import { CardText, Card,Row, Col, CardTitle, Button } from 'reactstrap';
 import axios from 'axios'

 const entrypoint = process.env.REACT_APP_API_ENTRYPOINT+'/api';

 class AdminPage  extends Component {


constructor(props) {
    super(props);
    this.state = {
        data: [],
        message: {
            to: '',
            body: 'hola amigo :)'
          },
          submitting: false,
          error: false
    };
    this.onHandleChange = this.onHandleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

}

onSubmit(event) {
    event.preventDefault();
    this.setState({ submitting: true });
    fetch('/api/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.state.message)
    })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          this.setState({
            error: false,
            submitting: false,
            message: {
              to: '',
              body: ''
            }
          });
        } else {
          this.setState({
            error: true,
            submitting: false
          });
        }
      });
   }
   // rest of the component
    onHandleChange(event) {
    const name = event.target.getAttribute('name');
    this.setState({
      message: { ...this.state.message, [name]: event.target.value }
    });
  }
getRandom = async () => {

    const res = await axios.get(
        entrypoint + "/alluserpls"
    )
    this.setState({ data: res.data })
}
componentDidMount() {
    this.getRandom()
}
render() {

    let datas = this.state.data.map(datass => {
       const status = JSON.parse(localStorage.getItem("validated-order")||"{}")[datass.id];
        return (
            <div>
              < Col sm="12" key={datass.id} className="wtfFuHereIsForOnlyBackGroundColorForCol12Nice">

           <div key="a"> 
      <Card body className="yoloCardBody">

      <CardText> Téléphone {datass.phone}</CardText>

     <form
    onSubmit={this.onSubmit}
    className={this.state.error ? 'error sms-form' : 'sms-form'}  >
        <div>
          <input
             type="tel"
             name="to"
             id="to"
             value={this.state.message.to}
        onChange={this.onHandleChange}
        /> 
        </div> 
      <Button className="buttonForLancerMaybe" type="submit" disabled= 
      {this.state.submitting}>SMS</Button>
      </form>
    </Card>
    </div>
  </Col>
            </div>
        )
    })
    return (
        <div> <div>
    <div> 
    {datas}
  </div>
    </div>
    </div>
            <div className="box">       
            </div>
        </div>
    )
    }
    }

 export default AdminPage 

Answer 1

所以我想你的代码中的这个小改动会对你有所帮助，分离逻辑并为你的表单部分创建一个新组件将是你的解决方案。假设我们有一个名为“SmsForm”的组件，所以首先，您需要将其导入当前组件：

import SmsForm from "../SmsForm/Loadable";

然后您将您的电话号码作为道具传递给此 SmsForm，如下所示：

let datas = this.state.data.map(datass => {
    const status = JSON.parse(localStorage.getItem("validated-order") || "{}")[datass.id];
    return (
        <div>
            < Col sm="12" key={datass.id} className="wtfFuHereIsForOnlyBackGroundColorForCol12Nice">

                <GridLayout className="GridlayoutTextOnlyForGridOuiAndHeigthbecauseHeigthWasBug" layout={layout} cols={12} rowHeight={30} width={1200}>

                    <div key="a">
                        <Card body className="yoloCardBody">

                            <CardText> Téléphone {datass.phone}</CardText>

                           <SmsForm phone={datass.phone}/>
                        </Card>
                    </div>
                </GridLayout>
            </ Col>
        </div>
    )
})

而 SmsForm 会是这样的：

    import React from 'react';
     ...
    export class SmsForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                message: {
                    to: props.phone,
                    body: 'hola amigo :)'
                },
                submitting: false,
                error: false
            };
            this.onHandleChange = this.onHandleChange.bind(this);
            this.onSubmit = this.onSubmit.bind(this);
        }


        onSubmit(event) {
            event.preventDefault();
            this.setState({ submitting: true });
            fetch('/api/messages', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(this.state.message)
            })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        this.setState({
                            error: false,
                            submitting: false,
                            message: {
                                to: '',
                                body: ''
                            }
                        });
                    } else {
                        this.setState({
                            error: true,
                            submitting: false
                        });
                    }
                });
        }
        // rest of the component
        onHandleChange(event) {
            const name = event.target.getAttribute('name');
            this.setState({
                message: { ...this.state.message, [name]: event.target.value }
            });
        }
        render() {
            return (
                <form
                    onSubmit={this.onSubmit}
                    className={this.state.error ? 'error sms-form' : 'sms-form'}  >
                    <div>
                        <input type="tel" name="to" id="to" value={datass.phone} onChange={e => this.onHandleChange(e, e.target.value)}/>
                    </div>
                    <Button className="buttonForLancerMaybe" type="submit" disabled=
                        {this.state.submitting}>SMS</Button>
                </form>
            );
        }
    }
export default SmsForm;