Установить состояние формы, возвращаемое значение функции

Question

Я хочу установить состояние timeToCountdown со значением allTimeInSeconds.

Затем я хочу отправить эти данные в качестве опоры для компонента.

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

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

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

   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({timeToCountDownValue: this.allTimeInSeconds});

        console.log(allTimeInSeconds);

        return allTimeInSeconds;
    }

Answer 1

че тут ошибка:

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

Переменная this.allTimeInSeconds не выходит. Я думаю, это будет работать:

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

Answer 2

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 также будет равно нулю даже в текущем компоненте

Answer 3

Я думаю, вы можете сделать это так, если я правильно понял вопрос:

Предполагая, что 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} />
        )
    }