时间戳

首页 > 解决方案 > 如何在反应中传递表单提交的输入值

reactjs - 如何在反应中传递表单提交的输入值

问题描述

在提交时，我想将用户输入的输入值传递给该字段的功能和警报值。这是我得到的代码，我被困住了，我知道这是基本的东西，但我是 React 的新手，所以有人可以进一步解释一下。

这是代码

class UserInput extends Component{
   onInputChange(event){
    alert(event.target.value);
   }


    render(){
        return (
            <div>
                <form noValidate autoComplete="off" onSubmit={this.onInputChange}>
                <TextField
                    id="outlined-name"
                    label="Image Search"
                    margin="normal"
                    variant="outlined"
                    style={{minWidth:'500px'}}
                    type="text"
                    /><br></br>
                    <Button 
                    variant="contained" 
                    color="primary"
                    type="submit"
                    >
                    Search
                    </Button>

                </form>

顺便说一句，这是 Material UI TextField 和 Button 元素。

标签： reactjs

解决方案

当您按下提交按钮时，您将函数传递给的onSubmit道具将被“触发”。onInputChange这给您的是用户提交表单时的信息。

为了从表单中的输入传递值，您需要将它们存储在组件的状态中，并在用户修改输入时相应地更改它们。

您可以在此处阅读有关此内容的更多信息。

并解决您的问题：

    class UserInput extends Component{
constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

   onSubmit(event){
    alert('Form submitted:' + this.state.value);
   }


    render(){
        return (
            <div>
                <form noValidate autoComplete="off" onSubmit={this.onSubmit}>
                <TextField
                    onChange={this.handleChange}
                    id="outlined-name"
                    label="Image Search"
                    margin="normal"
                    variant="outlined"
                    style={{minWidth:'500px'}}
                    type="text"
                    /><br></br>
                    <Button 
                    variant="contained" 
                    color="primary"
                    type="submit"
                    >
                    Search
                    </Button>

                </form>

推荐阅读