Question

我写了一个小组件，将状态输入存储在状态中，但是不确定如何使用Axios将输入提交到后端。

这就是我所做的。

使用空字符串初始化状态
创建函数以处理更改并在状态中存储值
创建switch语句以保存表单的每个状态
最后一步，我分配了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})
};

将表单状态发布到后端-使用nodemailer

1 个答案: