Question

我是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>
  )
}

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

如何将正确的函数传递给孩子，如何在Logic组件中按一下按钮以恢复文本值？

Answer 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的函数引用。

从子组件中获取价值

1 个答案: