Question

子组件

import React, { Component } from 'react'

export default class Login extends Component {
  constructor (props) {
    super(props);
    this.state = {Id: '',name: '',gender: ''};

    this.show = this.show.bind(this);
  }

  show (event) {
    if (this.state.Id === "123456" && this.state.name !== '' && this.state.gender !== '') {
      this.props.show();

      alert('you are login');
      console.log('A ID was submitted: ' + this.state.Id);
      console.log('A Name was submitted: ' + this.state.name);
      console.log('A Gender was submitted: ' + this.state.gender);
    } else {
      alert('Please enter your valid id,Your Name & Gender');
    }

    event.preventDefault();
  }

  render () {
    return (
      <div className="login">
        <form onSubmit={ this.show.bind(this) }>
          <div>
            <label>Your ID:</label>
            <input type="text" onChange={ event => this.setState({ Id: event.target.value }) } placeholder="Enter your ID" />
          </div>
          <br />

          <div>
            <label>Your Name:</label>
            <input type="text" onChange={ event => this.setState({ name: event.target.value }) } placeholder="Enter your Name" />
          </div>

          <br />
          <div>
            <label>Your Gender:</label>
            <label>Female:</label>
            <input type="radio" name="gender" value="Female" onChange=
              { event => this.setState({ gender: event.target.value }) } />
            <label>Male:</label>
            <input type="radio" name="gender" value="Female" onChange={ event => this.setState({ gender: event.target.value }) } />
          </div>
          <input type="submit" value="Submit" onClick={ this.props.comingvalue } />
        </form>
      </div>
    )
  }
}

父组件

class App extends Component {
  constructor (props) {
    super(props);

    this.state = { Id: '', name: '', gender: '' };
  }

  getvalue () {
    console.log('getting values as props');
    this.setState({ Id: this.state.Id });
    this.setState({ name: this.state.name });
    this.setState({ gender: this.state.gender });
  }

  render () {
    return (
      <div className="App">
        <Login comingvalue={ this.getvalue } />
        <button type="button" className="btn btn-primary" onClick=
          { this.handleLogin }>Sign In</button>
      </div>
    );
  }
}

export default App;

现在这里是我的问题，我希望当我在我的子组件中输入值时，我在父组件中获取这些值，我可以得到这个请帮助..＆＃39;我的事情你应该知道我切了很多从上面的代码的代码可能有任何其他错误，但我想知道我上面提到的一件事我想要父组件中的子组件价值..请建议我正确的解决方案..谢谢

Answer 1

只是未来帖子的指针：代码越少越好，请为了上帝的爱，确保格式正确。

React中用于将信息传递回树的标准模式是将子回调作为道具传递给孩子。

<强>父

class Parent extends React.Component {
  onChildCallback = (data) => {
    alert(data)
  }

  render() {
    return (
      <div>
        ...
        <Child onAction={this.onChildCallback}/>
      </div>
    )
  }
}

儿童

class Child extends React.Component { render() { return ( <button onClick={() => this.props.onAction('hello from the child')}> Click Me! </button> ) } }

这当然是简化的，但你可以随意扩展它。有些事需要注意：

确保您要么绑定父项中的回调，要么使用箭头函数（在这种情况下，我使用的是ES7类属性）

如果你需要孩子的孩子的数据，你需要链接这些......你可以使用context，但是......不要。只是不要。

ReactJS - 将输入值从child传递给parent

1 个答案: