Question

这是父代码。我目前有更新日期的代码并传递给日期组件，但现在正在使用秒表并且无法将道具传递到秒表子组件。计数器将继续计数，但提交的新号码不会更新或传递给秒表组件。

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        deadline: 'December 25, 2018',
        newDeadline: '',
        counter: 75,
        newCounter: ''
    };
}

changeDeadline() {
    this.setState({deadline: this.state.newDeadline});
}

changeNumber() {
    this.setState({counter: this.state.newCounter});
}

render() {
    return (
        <div className='App'>
            <div className='App-title'>Countdown to {this.state.deadline}</div>
            <Clock 
                deadline={this.state.deadline}
            />
            <Form inline>
                <FormControl
                    className="Deadline-input"
                    placeholder='New Date'
                    onChange={event => this.setState({newDeadline: event.target.value})}
                />
                <Button onClick={() => this.changeDeadline()}>Submit</Button>
            </Form>

            <div>Stopwatch From { this.state.counter } Seconds</div>
            <Stopwatch 
                counter={this.state.counter}
            />

            <Form inline>
                <FormControl
                    className="Deadline-input"
                    placeholder='New Number'
                    onChange={event => this.setState({newCounter: event.target.value})}
                />
                <Button onClick={() => this.changeNumber()}>Submit</Button>
            </Form>

        </div>
    )

}

}

这是秒表代码;

class Stopwatch extends Component {
constructor(props){
super(props);
this.state = {currentCount: this.props.counter}
}

timer() {
this.setState({
  currentCount: this.state.currentCount - 1
})
if(this.state.currentCount < 1) { 
  clearInterval(this.intervalId);
}
}
componentDidMount() {
this.intervalId = setInterval(this.timer.bind(this), 1000);
}
componentWillUnmount(){
  clearInterval(this.intervalId);
}
render() {
  return(
  <div>{this.state.currentCount}</div>
);

先谢谢。

Answer 1

在子构造函数中，您引用了this.props，但是它没有绑定到那里的组件，因此您实际上是在设置undefined。

您需要使用props.counter才能使用它。

Answer 2

@ acer79，您可以对App.js使用以下代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 75,
      newCounter: 75
    };
    this.setInputNumber = this.setInputNumber.bind(this);
  }

  setInputNumber(event) {
    event.preventDefault();
    this.setState({counter: Number(event.target.value)})
  }

  changeNumber() {
    this.setState({newCounter: this.state.counter});
  }

  render() {
    return (
      <div className='App'>
        <div>Stopwatch From { this.state.newCounter || this.state.counter} Seconds</div>
        <Stopwatch
          counter={this.state.newCounter}
        />
        <Form inline>
          <FormControl
            className="Deadline-input"
            placeholder='New Number'
            onChange={this.setInputNumber}
          />
          <Button onClick={() => this.changeNumber()}>Submit</Button>
        </Form>

      </div>
    )

  }
}

以及Stopwatch.js的以下内容：

import React from 'react';


export default class Stopwatch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: props.counter}
  }

  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    })
    if (this.state.currentCount < 1) {
      clearInterval(this.intervalId);
    }
  }

  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  componentWillReceiveProps(nextProps){
    debugger;
    if(nextProps.counter !== this.props.counter){
      this.state = {currentCount: nextProps.counter}
    }
  }

  render() {
    return (
      <div>{this.state.currentCount}</div>
    );
  }
}

为什么我不能将道具传递给子组件React？

2 个答案: