Question

169

React, Binding input values

rated 0 times [ 176] [ 7] / answers: 1 / hits: 38950 / 9 Years ago, wed, december 2, 2015, 12:00:00

I'm having some problems with binding the value of an input, I have done it on another component of my app and it worked fine, but somehow I can't get it works on another component. I'm only getting the first letter and not the whole text

This is my component

class Post extends Component {



  constructor(props) {

    super(props);

    this.state = {

      post: this.props.data,

      comment: ''

    }

    Post.context = this;

  }

render() {

<input type=text value={this.state.comment} onChange={this.handleChange} placeholder=Write a comment... />

      <button className=button comments onClick={this.handleClick.bind(null,this.state.post.id)}></button>

}

 handleChange(e) {

    Post.context.setState({comment: e.target.value});

}

}

I also tried to use an example from React website but it got the same result:

 render() {

     var valueLink = {

      value: this.state.comment,

      requestChange: this.handleChange

    };

 render() {

    <input type=text valueLink={valueLink} placeholder=Write a comment... />

          <button className=button comments onClick={this.handleClick.bind(null,this.state.post.id)}></button>

    }

     handleChange(newValue) {

        Post.context.setState({comment: newValue});

    }

    }

Does someone have idea, why this is happening?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lonnier

Add To Favorites

Follow

Total Points: 621

Total Questions: 113

Total Answers: 98

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 9 Years ago jennie · Accepted Answer

You must wrap input and button in root element (for example div)., component can have only one root element.

You can use .bind like in my example, and avoid using Post.context = this;

class Post extends React.Component {

  constructor(props) {

    super(props);



    this.state = {

      post: this.props.data,

      comment: ''

    };

  }



  render() {

    return <div>

      <input 

        type=text 

        value={this.state.comment} 

        onChange={ this.handleChange.bind(this) } 

        placeholder=Write a comment... />



      <button 

        className=button comments 

        onClick={ this.handleClick.bind(this, this.state.post.id)}>Button</button>

    </div>

    }



  handleClick(postId, e) {

    console.log( postId );

    console.log( this.state.comment );

  }



  handleChange(e) {

    this.setState({ comment: e.target.value });

  }

}

Example

Note: React 16.* contains the new feature - Fragments, which allows skipping additional root element.

render() {

  return (

    <>

      <input 

        type=text 

        value={this.state.comment} 

        onChange={ this.handleChange.bind(this) } 

        placeholder=Write a comment...

      />



      <button 

        className=button comments 

        onClick={ this.handleClick.bind(this, this.state.post.id)}

      >

        Button<

      /button>

    </>

  )

}