Not able to call onChange function of a TextInput in Redux, React JS

Question

I am working on an app with React and Redux and displaying some data from API in TextInput control. But now I am not able to edit the data in the TextInput. Following is my complete code of the class:

    import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import Article from "grommet/components/Article";
import Box from "grommet/components/Box";
import Button from "grommet/components/Button";
import Header from "grommet/components/Header";
import Heading from "grommet/components/Heading";
import Section from "grommet/components/Section";
import AdminMenu from "../../components/Nav/Admin";
import NavControl from "../../components/Nav/Control";
import { getMessage } from "grommet/utils/Intl";
import Notices from "../../components/Notices";
import CheckBox from "grommet/components/CheckBox";
import TextInput from "grommet/components/TextInput";

import { pageLoaded } from "../utils";
import {
  recognitionSettingsLoaded,
  recognitionSettingsSaved,
} from "../../actions/settings-recognition";
import dashboard from "../../reducers/dashboard";

class Settings extends Component {
  constructor(props) {
    super(props);
    this.handleDaysChange = this.handleDaysChange.bind(this);
    this.handleActiveChange = this.handleActiveChange.bind(this);
  }

  componentDidMount() {
    const { dispatch, settingRecognition } = this.props;
    console.log(this.props.state);
    console.log(dashboard);
    dispatch(recognitionSettingsLoaded("2"));
    pageLoaded("Configuration");
  }

  onSave() {
    const { survey, dispatch } = this.props;
    dispatch(
      recognitionSettingsSaved(
        this.props.settingRecognition.days,
        this.props.settingRecognition.active
      )
    );
  }

  handleDaysChange(e) {
    const days = e.target.value;
    settingRecognition.days = days;
  }

  handleActiveChange(e) {
    const active = e.target.value;
    settingRecognition.active = active;
  }

  render() {
    const { dispatch, settingRecognition } = this.props;
    console.log("render method");
    console.log(settingRecognition);

    const { intl } = this.context;
    return (
      <Article primary={true}>
        <Header
          direction="row"
          justify="between"
          size="large"
          pad={{ horizontal: "medium", between: "small" }}
        >
          <NavControl name={getMessage(intl, "Configuration")} />
          <AdminMenu />
        </Header>
        <Box pad={{ horizontal: "medium", vertical: "medium" }}>
          <Heading tag="h4" margin="none">
            {getMessage(intl, "RecognitionLifetime")}
          </Heading>
          <Heading tag="h5" margin="none">
            {getMessage(intl, "DefineIsRecognitionTemporary")}
          </Heading>
          <Box direction="row">
            <CheckBox
              toggle={true}
              checked={settingRecognition.active}
              onChange={this.handleActiveChange}
            />{" "}
            <Heading tag="h3" margin="none">
              {getMessage(intl, "NewUserActive")}
            </Heading>
          </Box>
          <Heading tag="h3" margin="none">
            {getMessage(intl, "HideAfter")}
          </Heading>
          <Box direction="row">
            <TextInput
              placeholder="type here"
              value={settingRecognition.days.toString()}
              onChange={this.handleDaysChange}
            />{" "}
            <Heading tag="h3" margin="none">
              {getMessage(intl, "Days")}
            </Heading>
          </Box>
          <Button
            path="/recognition-settings"
            label={getMessage(intl, "NewUserSave")}
            primary={true}
            onClick={() => {
              this.onSave();
            }}
          />
        </Box>
        <Notices />
      </Article>
    );
  }
}

Settings.propTypes = {
  dispatch: PropTypes.func.isRequired,
  settingRecognition: PropTypes.object.isRequired,
};

Settings.contextTypes = {
  intl: PropTypes.object,
};

const mapStateToProps = (state) => ({
  settingRecognition: state.settingRecognition,
});
export default connect(mapStateToProps)(Settings);

I have created handleDaysChange function which should run on the text change of TextInput control. I have done similar thing for the checkbox and that works fine but I am not able to get it working for the TextInput.

@BARNOWL no it didn't work for me, Is my onChange method of TextInput correct? — mars_dev
– mars_dev, Commented Jul 22, 2020 at 17:26

BARNOWL · Accepted Answer · 2020-07-22 18:55:40Z

1

You are not binding your change events.

Try this....

class Settings extends Component {

  constructor(props){
     super(props);

    this.handleDaysChange = this.handleDaysChange.bind(this);
    this.handleActiveChange = this.handleActiveChange.bind(this);

  }
  componentDidMount(){
   ....
  }
  ......
 }

and change this

   <CheckBox
     toggle={true}
     checked={settingRecognition.active}
     onChange={(e) => this.handleActiveChange(e)}
    />

To this

   <CheckBox
     toggle={true}
     checked={settingRecognition.active}
     onChange={this.handleActiveChange}
    />

same for text input

 <TextInput
    placeholder="type here"
    value={settingRecognition.days.toString()}
    onChange={this.handleDaysChange}
 />

edited Jul 22, 2020 at 18:55

answered Jul 22, 2020 at 17:13

BARNOWL

3,62913 gold badges50 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mars_dev Over a year ago

Hi, I tried your code but it is still not working for me. Is my onChange call from TextInput and the function correct?

mars_dev Over a year ago

I tried it but it is still not working, it is working for the checkbox but not for the TextInput, just below that

BARNOWL Over a year ago

@Panks any luck ? the text input will follow the same flow. as the checkbox onChange

BARNOWL Over a year ago

what exactly the error your getting. Take a screenshot of it and post it on your post.

mars_dev Over a year ago

I dont get any error but the onChange function doesn't work for me. I am updating my code.

|

louis.sugar · Accepted Answer · 2020-07-22 17:13:28Z

0

You need to set up two-way-binding so that the content of the textInput reflects the prop that you set in your onChange function. Try giving your textInput a property of value={this.settingRecognition.days}

answered Jul 22, 2020 at 17:13

louis.sugar

2011 silver badge10 bronze badges

Collectives™ on Stack Overflow

Not able to call onChange function of a TextInput in Redux, React JS

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related