web-dev-qa-db-ja.com

React、入力値のバインド

入力の値のバインドに問題があります。アプリの別のコンポーネントでそれを実行し、正常に機能しましたが、どういうわけか別のコンポーネントで機能させることができません。テキスト全体ではなく、最初の文字のみを取得しています

これは私のコンポーネントです

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});
}
}

また、Reactウェブサイトからの例を使用しようとしましたが、同じ結果が得られました。

 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});
    }
    }

誰かがアイデアを持っていますか、なぜこれが起こっているのですか？

javascriptinputdata-bindingreactjs
16
Gabriel Lopes

inputとbuttonをroot要素（たとえばdiv）でラップする必要があります。コンポーネントはルート要素を1つしか持つことができません。

私の例のように.bindを使用し、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

注：React 16. *には新しい機能が含まれています- Fragments 。追加のルート要素をスキップできます。

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>
    </>
  )
}
25
Alexander T.