Question

我具有以下功能组件

const input = props => (
  <div>
    <input placeholder="Type a message..." />
    <div onClick={props.send} className="icon">
      <i className="fa fa-play" />
    </div>
  </div>
)

如何将输入的值传递给props.send()？

Answer 1

有很多方法可以做到这一点，因为您非常担心性能。这是实现，仅当您单击发送按钮时才呈现您的组件，这实际上意味着状态将被更新一次并且输入值将显示在父组件中。

const Input = props => {
  return (
    <div>
      <input onChange={props.changeHandler} placeholder="Type a message..." />
      <button onClick={props.send}>send</button>
    </div>
  );
};

class App extends Component {
  state = {
    inputValue: ""
  };

  inputValue = '';

  send = () => {
    this.setState({ inputValue: this.inputValue });
  };

  changeHandler = event => {
    this.inputValue = event.target.value;
  };

  render() {
    console.log("In render");
    return (
      <React.Fragment>
        <Input changeHandler={this.changeHandler} send={this.send} />
        <div> {this.state.inputValue}</div>
      </React.Fragment>
    );
  }
}

Answer 2

由于您提到刚开始使用React，所以建议您仔细阅读 documentation （提供了很好的解释）。

根据您的评论，不需要使用功能组件。因此，我建议采用这种方式->

您的CustomInput组件：

import React from "react";
import PropTypes from "prop-types";

class CustomInput extends React.Component {
  constructor() {
    super();
    this.textInput = React.createRef();
  }

  static propTypes = {
    send: PropTypes.func
  };

  render() {
    const { send } = this.props;
    return (
      <React.Fragment> 
        <input placeholder="Type a message..." ref={this.textInput} />
        <div
          onClick={() => send(this.textInput.current.value)}
          className="icon"
        >
          CLICK ME
        </div>
      </React.Fragment>
    );
  }
}

export default CustomInput;

如果您注意到了，我将空div替换为React.Fragment。在这种情况下，您可以省略不必要的<div>包装（如果不需要），这样可以使您的DOM保持整洁（有关详细信息，请 here 。

用法：

<CustomInput
   send={(prop) => {
      console.log(prop)
   }}
/>

我只是使用了一个虚拟函数，它将输入值记录到控制台。

您可以检查工作示例（确保在编辑器中触发console） here

Answer 3

我在React的官方文档https://reactjs.org/docs/refs-and-the-dom.html#refs-and-functional-components

上找到了针对此确切场景的解决方案

这种方法使您的组件保持无状态，也不需要每次更改都更新父组件。

基本上，

const input = props => {

let textInput = React.createRef();

function handleClick() {
  console.log(textInput.current.value);
}

return (
    <div>
      <input ref={textInput} placeholder="Type a message..." />
      <div onClick={handleClick} className="icon">
        <i className="fa fa-play" />
      </div>
    </div>
  )
}

如何在无状态React组件中单击按钮时获取输入的值？

3 个答案: