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

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

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

您可以了解有关此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钩子的功能组件而不是类组件，因为带有功能组件的代码看起来更简洁：

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>
  );
}

如何在react中提交的表单上传递输入值

2 个答案: