Question

我想将<div id="main-charts"> <table id="time-h-axis"> <tr></tr> </table> <svg height="330" width="11970"></svg> </div>的状态设置为timeToCountdown。

然后我想将该数据作为道具发送给组件。

allTimeInSeconds

Answer 1

我认为，如果我正确理解了这个问题，就可以这样做：

假定timeToCountDown是要作为属性发送的值，则无需在函数changeAllTimeInputsToSeconds中返回该值。就像您已经做的那样，您可以使用setState()函数来更新state的值。然后它将被自动发送到您的组件。

MyComponent必须替换为您要发送属性的组件。

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

        this.state = {
            hours: "",
            minutes: "",
            seconds: "",
            timeToCountdown: 0,
        };

        this.grabHours = this.grabHours.bind(this);
        this.grabMinutes = this.grabMinutes.bind(this);
        this.grabSeconds = this.grabSeconds.bind(this);
        this.changeAllTimeInputsToSeconds();
    }

   changeAllTimeInputsToSeconds(){
        var timerHours = Number((parseInt(this.hours.value, 10)*3600)) || 0
        var timerMinutes = Number((parseInt(this.minutes.value, 10)*60)) || 0
        var timerSeconds = Number(parseInt(this.seconds.value, 10)) || 0
        var allTimeInSeconds = timerHours + timerMinutes + timerSeconds;       
        this.setState({timeToCountDown: allTimeInSeconds });
        console.log(allTimeInSeconds);
    }

    render() {
        return (
            <MyComponent timeToCountdown={this.state.timeToCountdown} />
        )
    }

Answer 2

错误在这里：

var allTimeInSeconds = timerHours + timerMinutes + timerSeconds;       
this.setState({ timeToCountDownValue: this.allTimeInSeconds });

变量this.allTimeInSeconds不存在。我想这会起作用：

const allTimeInSeconds = timerHours + timerMinutes + timerSeconds;       
this.setState({ timeToCountDownValue: allTimeInSeconds });

Answer 3

get hours, minute and seconds value from the state

var timerHours = Number((parseInt(this.hours.value, 10)*3600)) || 0
        var timerMinutes = Number((parseInt(this.minutes.value, 10)*60)) || 0
        var timerSeconds = Number(parseInt(this.seconds.value, 10)) || 0

use this.state.hours in place of this.hours similar for other values

从当前代码开始，即使在当前组件中，timeToCountdown的值也将为零

设置功能的状态表格返回值

3 个答案: