Question

＆＃13;

class A extends React.Component {
  constructor(props) {
    super(props);
    this.state = { obj: this.two }
    this.one = this.one.bind(this);
    this.two = this.two.bind(this);
  }

  one() {
    console.log("Working...")
  }

  two() {
    return <input type='submit' onClick={this.one} />;
  }

  render() {
    return (
      <h1>
          As Function:<B two={this.two} />
          As Object Property: <B two={this.state.obj} />
      </h1>
    )
  }
}


class B extends React.Component {
  render() {
    return (
      <h1>{this.props.two()}</h1>
    )
  }
}

ReactDOM.render(<A />, document.getElementById('app'));

＆＃13;

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

＆＃13;

＆＃13; 在这里，我试图从组件A向组件B发送一个函数two，它返回一个输入元素。在输入元素上我给出了onClick，它调用组件A的函数one并在控制台中输出。

所以现在我将函数two以两种形式发送到组件B

一个作为直接功能
其他作为对象的属性，以[作为对象属性]

在这两种情况下，按钮都是渲染，但输入是仅在第一种情况下触发点击而不是第二种情况我想在第二种情况下完成这项工作。

提前致谢...帮帮我

Answer 1

实际上，最简单的更改是将状态赋值移动到构造函数的最后一行，原因很简单，那么绑定到此上下文就可以了。

class A extends React.Component {
  constructor(props) {
    super(props);
    this.one = this.one.bind(this);
    this.two = this.two.bind(this);
    this.state = { obj: this.two };
  }
  // ... rest stays as is
}

当您首先设置state，然后才更改绑定上下文时，state.obj将不会与此绑定上下文。

虽然这可以解决您提出的问题，但我不清楚这是否是您真正想要的。我强烈建议你不要像你那样创建子组件，它会成为一种强大的方式，A应该是决定如何呈现B的方式。

也许你只想将一个无状态组件传递给你的B类，它接收一个应该在A类上触发的回调函数，它可以/应该通过传递props来实现，而不是通过传递一个呈现另一个组件的方法来实现。 / p>

所以你可以创造一些类似

的东西

const SubmitButton = ({ 
  trigger = () => {}, 
  text = "Submit"
}) => <input type="Submit" onClick={trigger} value={text} />;

然后像在这个例子中一样使用它

const SubmitButton = ({ 
  trigger = () => {}, 
  text = "Submit"
}) => <input type="Submit" onClick={trigger} value={text} />;

class A extends React.Component {
  constructor(props) {
    super(props);
    this.state = { obj: this.one }
  }

  one() {
    console.log("Working...")
  }

  two() {
    return <input type='submit' onClick={this.one} />;
  }

  render() {
    return (
      <h1>
          <div>As Function:<SubmitButton trigger={() => this.one()} text="Submit Function" /></div>
          <div>As Object Property: <SubmitButton trigger={() => this.state.obj()} text="Submit state" /></div>
          <div>Through B function:<B itemTemplate={SubmitButton} trigger={() => this.one()} /></div>
          <div>Through B state:<B itemTemplate={SubmitButton} trigger={() => this.state.obj()} /></div>
      </h1>
    )
  }
}

class B extends React.Component {
  render() {
    const Template = this.props.itemTemplate;
    return <h1><Template {...this.props} /></h1>;
  }
}

ReactDOM.render(<A />, document.getElementById('app'));

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

Answer 2

状态在React中是异步的。您无法设置状态并立即使用它。这也适用于初始状态集。

没有调用ReactJS函数

2 个答案: