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

Question

提交时，我想将用户输入的输入值传递给该字段的函数和警报值。这是我得到的代码，我被困住了，我知道这是基本的东西，但我是 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 元素。

Answer 1

当您按下提交按钮时，您传递给 onInputChange 函数的 onSubmit 道具是 'triggered'。这为您提供的是用户提交表单时的信息。

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

您可以阅读更多相关信息 here。

以及您的问题的解决方案：

    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>

Answer 2

为了访问输入的值，您需要将其保存到组件的状态中。

我建议你使用带有 React hooks 的功能组件而不是 class 组件，因为带有功能组件的代码看起来更干净：

function UserInput(){
  const [text, setText] = useState('');

  const onInputChange = (event) => {
   setText(event.target.value);
  }

  const onSubmit = () => {
    console.log(text);
  }

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

          </form>
     </div>
  );
}

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

How to pass input value on form submit in react

reactjs