从子组件中获取值答案

【问题标题】：get value from child component从子组件中获取值
【发布时间】：2018-07-26 22:23:26
【问题描述】：

我是 React 新手，需要针对我的具体情况提供一些帮助。我有一个渲染的顶级 app.js

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        currentGuess: '',
        historicGuess: '',
        result: ''
    };
  }

  handleCurrentGuess(event) {
    console.log(event)
    this.setState({currentGuess: event.target.value})
  }

  handleSend() {
    console.log(this.state.currentGuess)
  }

  render() {
    return (
        <div className="wrapper">
            <Header />
            <Logic handleCurrentGuess={this.handleCurrentGuess}/>
            <Result />
        </div>
    )
  }
}

组件必须是有状态的，我将 currentGuess 值输入到状态中。

<Logic /> 看起来像这样：

export default function Logic(props) {
  console.log(props)
  return (
    <div className="logic">
        <form>
            <input type="text" onChange={props.handleCurrentGuess}/>
            <button onClick={(e) => {
                e.preventDefault()
                props.handleSend
            }}>Send</button>
        </form>
    </div>
  )
}

现在的问题是我找不到有关如何将两者都传递给函数的文档，并从输入中返回一个值。大多数文档直接通过输入显示 onChange ，但我只想在有人单击提交按钮（或按回车键）时获取值。所以，

如何将正确的函数传递给子级，以及如何在逻辑组件中按按钮时获取文本值？

【问题讨论】：

只是想更好地了解你。那么，您希望仅单击子项中的按钮将值传递给父项吗？然后，您可以在孩子中定义一个状态，在处理输入后您可以将值传回。但是，这不是必需的，您的逻辑现在是如此。为什么需要这样的东西？
您可以使用回调，通过 props 传递给您的子组件以将状态传递给父组件
用户在输入中输入一个数字，当他们点击按钮时，我需要将输入的值传递给顶级组件中的状态
说“顶级”组件是指不同的组件渲染Page？
@devserkan 不，顶级组件指的是第一行的class Page extends React.Component

标签： reactjs

【解决方案1】：

如果您现在想console.log 状态（显然是出于测试目的），这是您的代码存在的两个问题。

首先，您没有将 handleSend 函数作为道具传递给 Logic 组件。其次，在您的按钮上，您没有在 onClick 处理程序中调用此 handleSend 函数。

这是一个工作示例。

const Logic = props => (
    <div className="logic">
      <form>
        <input type="text" onChange={props.handleCurrentGuess} />
        <button onClick={props.handleSend}>Send</button>
      </form>
    </div>
  );

class Page extends React.Component {
  state = {
    currentGuess: '',
    historicGuess: '',
    result: ''
  };

  handleCurrentGuess = event =>
    this.setState({ currentGuess: event.target.value })

  handleSend = (e) => {
    e.preventDefault();
    console.log(this.state.currentGuess)
  }

  render() {
    return (
      <div className="wrapper">
        <Logic
        handleCurrentGuess={this.handleCurrentGuess}
        handleSend={this.handleSend} />
      </div>
    )
  }
}

ReactDOM.render(<Page />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

我稍微更改了代码。使用一些箭头函数，所以不需要.bind 它们，删除不必要的构造函数，使用类字段等。我还在按钮中使用了onClick 的函数引用。

【讨论】：