在我的React应用程序中，我不知道如何将输入框的值传递给按钮的onclick

编程问答 2022-07-21

问题描述

方案是使用自己的发送按钮创建的输入框数量未知。用户输入一些值，然后单击该值，然后将与该输入关联的URI发送到将两个值连接在一起并在浏览器中打开的函数。我已经在普通的JS和Angular 9中做到了这一点，但是我不知道如何在React中做到这一点。我在React冒险中只有5天，我怀疑自己的方法是错误的。

在Angular中，我将创建对输入框的引用，在onclick中，我将添加reference.value。我该如何在React中做到这一点？

这很可能是重复的，但是我一直无法找到适合我的用例的质量检查。

Stackblitz starter app，现在它只是传递一个字符串。

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  
  handleClick(data){
    alert(data)
  }

  render() {
    return (
      <div>
        <form>
          <input placeholder='enter data' />
        </form>
        <br />
        <botton className='btn' onClick={() => this.handleClick('test')}>Click</botton>
      </div>
    );
  }
}

解决方法

您可以通过使用React.useRef来做到这一点：

import React from "react";

export default function App() {
  const ref = React.useRef();

  const handleClick = (data) => {
    alert(data)
  }

  return (
    <div>
        <form>
          <input ref={ref} placeholder='enter data' />
        </form>
        <br />
        <botton className='btn' onClick={() => handleClick(ref.current.value)}>Click</botton>
      </div>
  );
}

See example on codesandbox。

尽管，我会采用另一种方法（从方法而不是调用本身获取值：

import React from "react";

export default function App() {
  const ref = React.useRef();

  const handleClick = () => {
    if (ref) {
      alert(ref.current.value);
    }
  };

  return (
    <div>
      <form>
        <input ref={ref} placeholder="enter data" />
      </form>
      <br />
      <botton className="btn" onClick={handleClick}>
        Click
      </botton>
    </div>
  );
}
reactjsreactjsreactjsreactjsspinnerspinnerspinner