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

당신은 그 배열의 일관성을 유지하는 상태로 트윗 변수를 이동할 수 있습니다.

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

Jsfiddle 업데이트

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

주 : I 구성 요소 외부 tweets를 이동하고 몇 ES6 기능을 구현한다.

업데이트 Jsfiddle는 : https://jsfiddle.net/u5c21wj9/7/

Answer 4

당신은 정말 여기 상태를 사용하고 tweets 변수가 그것의 일부가 될 수 있도록해야한다. 이를 위해 생성자를 추가

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

그런 다음 당신은 당신이 입력 중 하나에 입력 할 때마다 각 link를 돌연변이해야합니다. 몇 가지 함정은 그래서 나를 하나씩 그들을 통해 가자 여기에 있습니다 :

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

당신은 상태 (사용 setState를)에 입력에서 텍스트를 저장해야하지 트윗 배열한다. 그런 다음 상태에서 텍스트를 가져올 수 있습니다.

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