Установить входное значение автоматически по запросу выборки

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

Так что я думаю, что это небольшое изменение в вашем коде поможет вам, отделив логи c и создав новый компонент для вашего раздела формы. скажем, у нас есть компонент под названием «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;