Reactでは、入力のリストをレンダリングするときに入力の値をバインドする方法は？

Question

私は入力のリストをレンダリングしており、各入力の値をリンクのhrefにバインドしたいと思います。私の現在の試みはhttps://twitter.com/intent/tweet?text=undefinedをレンダリング：

class App extends React.Component { 
    tweets = [ 
    { id: 1, link: 'example.com' }, 
    { id: 2, link: 'example2.com' } 
    ]; 

    render() { 
    return (
     <div> 
     {this.tweets.map(tweet => 
      <div key={tweet.id}> 
      <input type="text" placeholder="text" onChange={e => tweet.text = e.target.value} /> 
      <a href={`https://twitter.com/intent/tweet?text=${tweet.text}`}>Tweet</a> 
      </div> 
     )} 
     </div> 
    ); 
    } 
} 

これはおそらくsetStateが関与する必要がありますが、私はリストをレンダリングする際にそれを達成する方法は考えています。私はこれについていくつかの研究をしようとしましたが、役に立たないものは何も見つかりませんでした。

JSFiddle：https://jsfiddle.net/nunoarruda/u5c21wj9/3/

任意のアイデア？

Answer 1

あなたは、そのアレイの一貫性を維持するために、状態にツイート変数を移動することができます。あなたは（SETSTATEを使用して）状態での入力からではなく、つぶやき配列内のテキストを保存する必要がありhttps://jsfiddle.net/u5c21wj9/6/

Answer 2

リンク情報は、あなたのつぶやき配列のlinkプロパティにあります。プロパティtextは定義されていません。 だから、あなたのレンダリング機能は、あなたがstateを使用して、所望の結果に到達することができ、この

render() { 
    return (
     <div> 
     {this.tweets.map(tweet => 
      <div key={tweet.id}> 
      <input type="text" placeholder="text" onChange={e => tweet.text= e.target.value} /> 
      <a href={`https://twitter.com/intent/tweet?text=${tweet.link}`}>Tweet</a> 
      </div> 
     )} 
     </div> 
    ); 
    } 

Answer 3

のようになります。

return (
    <div> 
    {tweets.map(({ id, link }) => 
     <div key={id}> 
     <input type="text" placeholder="text" onChange={({ target }) => this.setState({ [id]: target.value })} /> 
     <a href={`https://twitter.com/intent/tweet?text=${this.state[id] || link}`}>Tweet</a> 
     </div> 
    )} 
    </div> 
); 

注：私はコンポーネントの外部tweetsを移動し、いくつかのES6機能を実装します。 https://jsfiddle.net/u5c21wj9/7/

Answer 4

あなたが本当にここの状態を使用して、あなたのtweets変数はそれの一部で行う必要があります。

はJsfiddleを更新しました。これを行うには、コンストラクタを追加します。

constructor() { 
    super(); 
    this.state = { 
    tweets: [ 
     { id: 1, link: 'example.com' }, 
     { id: 2, link: 'example2.com' } 
    ] 
    }; 
} 

は、その後、あなたが入力の一つに入力したときに、各linkを変異させる必要があります。いくつかの落とし穴はので、私は、1つずつ見ていきましょう、ここにあります

changeTweet = (id, e) => { 
    let arr = this.state.tweets.slice(); 
    let index = arr.findIndex(i => i.id === id); 
    let obj = Object.assign({}, arr[index]); 
    obj.link = e.target.value; 
    arr[index] = obj; 
    this.setState({tweets: arr}); 
} 

は、まず、あなたがあなたの状態変数のコピーを作成する必要があります。これは、アンチパターンである状態を直接変更することなく、作業することができます。これはslice()で行うことができます。

変更するオブジェクトのidを送信しているので、配列内で項目を検索する必要があります（項目が順序付けられていない場合）。これはfindIndex()で行われます。そのようなインデックスが見つからないシナリオを扱うことができます（私はそれをしていません）。

ここで、配列内で指定されたidキーのオブジェクトがどこにあるかを知りました。次に、そのアイテム（オブジェクト）のコピーを作成します。これは、状態を直接変更するのを防ぐためです。 Object.assign()でこれを行います。

今、私たちは中に型指定された入力値にlinkを変更します。新しいもの（obj）で古いアイテムのオブジェクトを交換し、新しいもの（arr）と古いtweets配列を置き換えます。

---

ここでは完全な例です：

class App extends React.Component {  
 
    constructor() { 
 
    super(); 
 
    \t this.state = { 
 
    \t tweets: [ 
 
     { id: 1, link: 'example.com' }, 
 
     { id: 2, link: 'example2.com' } 
 
     ] 
 
    }; 
 
    } 
 
    
 
    changeTweet = (id, e) => { 
 
    let arr = this.state.tweets.slice(); 
 
    let index = arr.findIndex(i => i.id === id); 
 
    let obj = Object.assign({}, arr[index]); 
 
    obj.link = e.target.value; 
 
    arr[index] = obj; 
 
    \t this.setState({tweets: arr}); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     {this.state.tweets.map(tweet => 
 
      <div key={tweet.id}> 
 
      <input type="text" placeholder="text" onChange={(e) => this.changeTweet(tweet.id, e)} /> 
 
      <a href={`https://twitter.com/intent/tweet?text=${tweet.link}`}>Tweet</a> 
 
      </div> 
 
     )} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 5

：Jsfiddleを更新しました

class App extends React.Component { 
 
    constructor(props) { 
 
    \t super(props) 
 
    this.state = { 
 
    \t tweets: [ 
 
     \t { id: 1, link: 'example.com' }, 
 
     \t { id: 2, link: 'example2.com' } 
 
     ] 
 
    }; 
 
    }; 
 
    
 
    setTweets = index => e => { 
 
    \t const { tweets } = this.state 
 
    tweets[index].text = e.target.value 
 
    this.setState({ tweets }) 
 
    } 
 

 
    render() { 
 
    \t const { tweets } = this.state 
 
    return (
 
     <div> 
 
     {tweets.map((tweet, index) => 
 
      <div key={tweet.id}> 
 
      <input type="text" placeholder="text" onChange={this.setTweets(index)} /> 
 
      <a href={`https://twitter.com/intent/tweet?text=${tweet.text}`}>Tweet</a> 
 
      </div> 
 
     )} 
 
     </div> 
 
    ); 
 
    } 
 
}

。その後、状態からテキストを取得することができます。

class App extends React.Component { 
    tweets = [ 
    { id: 1, link: 'example.com' }, 
    { id: 2, link: 'example2.com' } 
    ]; 

    state = { 
    tweetsText :{} 
    } 

    handleTextChange = (event, tweetId) => { 
    const tweetsTextCopy = Object.assign({}, this.state.tweetsText) 
    tweetsTextCopy[tweetId] = event.target.value 
    this.setState({tweetsText: tweetsTextCopy}) 
    } 

    render() { 
    return (
     <div> 
     {this.tweets.map(tweet => 
      <div key={tweet.id}> 
      <input type="text" placeholder="text" onChange={e => this.handleTextChange(e, tweet.id)} /> 
      <a href={`https://twitter.com/intent/tweet?text=${this.state.tweetsText[tweet.id]}`}>Tweet</a> 
      </div> 
     )} 
     </div> 
    ); 
    } 
}