React component: Simulate standard HTML <input/> API

Question

I want to make a component with an API like any standard input element, meaning I want to use it like this: <CustomInput value={this.state.custom_input_state} onChange={this.handleChange} />

Here is what I have so far, but I have no idea how to

Make the custom components value changeable from the parent component after it has been constructed
Make the parent's onChange handler function recieve a change event when the custom component's value changes

Here is my test setup:

class Form extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            foo: 0
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.increment = this.increment.bind(this);
    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
    }

    handleSubmit(event) {
        alert(this.state.foo);
        event.preventDefault();
    }

    increment() {
        this.setState({foo: this.state.foo + 1});    
    }

    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                <div onClick={this.increment}>Increment from parent</div>
                <CustomInput name="foo" value={this.state.foo} onChange={this.handleChange}/>
                <input type="submit" value="Submit" />
            </form>
        )
    }
}


class CustomInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value,
        };
        this.increment = this.increment.bind(this);
    }

    increment() {
        this.setState({value: this.state.value + 1});    
    }

    render() {
        return(
            <React.Fragment>
                <div onClick={this.increment}>Increment self</div>
                <input name={this.props.name} value={this.state.value}/>
            </React.Fragment>
        );
    }
}

Abinesh Joyel · Accepted Answer · 2019-02-01 07:46:37Z

1

You have to pass all the CustomInput props to the input element. In CustomInput component actually it not recieving the onChange event.

Pass the prop onChange event to input element

Form Component

class Form extends Component {
  constructor() {
    super();
    this.state = {
      foo: 'React'
    };
  }

  handleChange = (event) => {
    this.setState({
      [event.target.name]:event.target.value
    })
  }

  render() {
    return (
      <div>
        <form>
          <Custominput name="foo" onChange={this.handleChange} value={this.state.foo} />
        </form>
        {this.state.foo}
      </div>
    );
  }
}

CustomInput Component

export default class CustomInput extends React.Component{


  render(){
    return(
        <input {...this.props} />
    )
  }
}

demo link

answered Feb 1, 2019 at 7:46

Abinesh Joyel

2,0932 gold badges17 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

React component: Simulate standard HTML <input/> API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related