javascript - 如何在 JS 表单和 onSubmit 中使用值。我需要提交按钮吗？

Question

故事:

我有一个表单，我想用该表单的值来做事。作为背景，我使用react和react-bootstrap来制作这个表单，但如果事实证明它更简单，我非常愿意使用简单的表单(没有react-bootstrap)。

我的表单:

<form>
    <FormGroup controlId="formControlsSelect" className={classes.formGroup}>
        <ControlLabel className={classes.exportMessage}>Export</ControlLabel>
        <FormControl className={classes.selectControl} ref='exportType'
            componentClass="select" placeholder="Choose Option">
            <option value="text">Plain text</option>
            <option value="html">Simple HTML</option>
        </FormControl>
    </FormGroup>
    <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='default'
            onClick={this.handleClose}>Cancel</Button>
    <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='primary'
            type='submit' onSubmit={this.handleOnSubmit}>
        <FontAwesome className={classes.download} name="download" />Export</Button>
</form>

详细信息

• 我有 1 个 select 类型的输入(不确定我说得是否正确？)
• 此表单位于单击按钮后弹出的模式中，并且 handleClose 关闭该模式。
• 我希望能够使用 select 的值作为稍后获取调用中的参数。
  • 我无法获取此值

我在做什么:

提交时:

handleOnSubmit(e) {
    e.preventDefault();
    // formSelectValue = ???
    console.log(this.refs.exportType);
    // fetchAndDownloadExportFile(listOfItems, formSelectValue);
    this.handleClose();
}

这不起作用。 ref 不会输出到控制台。页面刷新，但就在刷新之前，我在控制台中收到错误:

事件处理程序中出现错误:TypeError:无法读取 e (chrome-extension://blahblah) 处未定义的属性“getCurrent”

我尝试过的:

我尝试从 Export 按钮中删除 type="submit"，改用 onClick，然后它会打印出 ref' d FormControl，但我没有看到任何指示我选择了两个选项中哪一个的信息。

最终:

我想要的只是能够从下拉列表中选择两个选项之一，纯文本 value="text" 或简单的 html value="html" 和然后将该值作为参数传递给函数(不相关)，然后我可以在获取中使用该函数。

其他可能有用的信息:我正在从 API 端点获取

@RequestMapping(
    value = '/api/export',
    method = RequestMethod.POST,
    consumes = [MediaType.APPLICATION_JSON_VALUE],
    produces = [MediaType.TEXT_HTML_VALUE, MediaType.TEXT_PLAIN_VALUE]
)

Answer 1

您需要以 react 方式执行此操作，即将选择输入的值保持在某种状态，并在需要时检索它。要保持选择值处于某种状态，请在选择输入上添加 onChange 事件处理程序，如下所示:

<FormControl className={classes.selectControl} componentClass="select" placeholder="Choose Option" onChange={this.handleChange} name="mySelectInput">

请注意，我已将 name 属性 添加到选择输入

使用handleChange如下所示:

handleChange = (evt)=> { // If you are using typescript, type evt like this evt: React.ChangeEvent<HTMLInputElement>
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
}

handleChange函数将保存状态中选择输入的值。现在您可以检索它并像这样使用它:

const {mySelectInput} = this.state;

下面是一个完整的示例，您可以查看:

    class MyAwesomeComponent extends React.Component {

        constructor() {
          super()
          this.state = {
             mySelectInput: ""
          }
          this.handleOnSubmit = this.handleOnSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this)
       }

        handleChange = (evt)=> {
           const target = event.target;
           const value = target.value;
           const name = target.name;

           this.setState({
             [name]: value
           });
        }


        handleOnSubmit(e) {
            e.preventDefault();

            // retrieve the value of the select input like this
            const {mySelectInput} = this.state; 

            // and use it here
        }

        render(){
           return(
                <form>
                   <FormGroup controlId="formControlsSelect" className={classes.formGroup}>
                      <ControlLabel className={classes.exportMessage}>Export</ControlLabel>
                       <FormControl className={classes.selectControl} componentClass="select" placeholder="Choose Option" onChange={this.handleChange} name="mySelectInput">
                          <option value="text">Plain text</option>
                          <option value="html">Simple HTML</option>
                       </FormControl>
                  </FormGroup>
                  <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='default'
            onClick={this.handleClose}>Cancel</Button>
                  <Button className={'cdm-btn' + ' ' + classes.modalButton} bsStyle='primary'
            type='submit' onSubmit={this.handleOnSubmit}>
        <FontAwesome className={classes.download} name="download" />Export</Button>
</form>
           )
        }
    }