постреактивное состояние формы для бэкэнда - с использованием nodemailer

Question

Я написал небольшой компонент, в котором я храню ввод данных в состоянии, но не уверен, как мне поступить с отправкой ввода с помощью Axios в мой бэкэнд.

Вот что я сделал.

1. Инициализировать состояние с пустыми строками
2. Создать функцию для обработки изменений и сохранить значение в состоянии
3. Создать оператор switch, который сохраняет каждое состояние формы
4. Последний шаг Я назначаю свою функцию onSubmit для подтверждения кнопки, которая запускает функцию для отправки этого бэкэнду.

Я создал функцию, но не уверен, как добавить ее к своему последнему шагу, поскольку я использовал ее вне функции, которую я использую, чтобы перейти к следующему шагу. Вот мой последний шаг, который должен опубликовать состояние моего бэкэнда:

Надеюсь, это имеет смысл.

class FormUserDetails extends Component {
constructor() {
    super()

    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
      message: '',
      location: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

async handleSubmit(e) {
    e.preventDefault()

    const {
      firstName, 
      lastName, 
      email, 
      phone, 
      message, 
      location
    } = this.state

    const form = await axios.post('/api/form', {
      firstName,
      lastName,
      email,
      phone,
      message,
      location
    })
  }

continue = e => {

    e.preventDefault();
    // Process Form
    this.props.nextStep();
}

back = e => {
    e.preventDefault();
    this.props.prevStep();
};

render() {
    const { values: { firstName, lastName, email, phone, message, location } } = this.props;
    return (
        <MuiThemeProvider>
            <div className="formFields">
                <List>
                    <ListItem
                        primaryText="First Name"
                        secondaryText={firstName}
                    />
                </List>
                <List>
                    <ListItem
                        primaryText="Last Name"
                        secondaryText={lastName}
                    />
                </List>
                <List>
                    <ListItem
                        primaryText="Email"
                        secondaryText={email}
                    />
                </List>
                <List>
                    <ListItem
                        primaryText="Phone"
                        secondaryText={phone}
                    />
                </List>
                <List>
                    <ListItem
                        primaryText="Message"
                        secondaryText={message}
                    />
                </List>
                <List>
                    <ListItem
                        primaryText="Location"
                        secondaryText={location}
                    />
                </List>
                <div className="buttonPosition">
                    <RaisedButton
                        label="confirm"
                        primary={true}
                        style={styles.button}
                        onSubmit={(e) => this.handleSubmit(e)}
                        // onClick={this.continue}
                    />
                    <RaisedButton
                        label="back"
                        primary={false}
                        style={styles.button}
                        onClick={this.back}
                    />
                </div>
            </div>
        </MuiThemeProvider>
    )
}

}

Answer 1

В идеале вам не следует звонить onSubmit и onClick на одну и ту же кнопку, поскольку это, как правило, плохая идея. Попробуйте объединить ваш код для двух функций в одну.

<RaisedButton 
  label="confirm"
  primary={true}
  style={styles.button}
  onSubmit={(e) => this.handleSubmit(e)}
/>

// Here is the function which should be used to send to backend
async handleSubmit(e) {
  e.preventDefault()
  //any logic or processing needed to get form ready to send
  const {firstName, lastName, email, phone, message, location} = this.state
  const form = await axios.post('/api/form', {firstName, lastName, email, phone, message, location})
};