繰り返しで1つの送信ボタンのみを有効にする

Question

ファイルアップロード画像が検出されたときに、どのフォーム送信ボタンを1つだけ有効にするのですか？

カードを返すモデルで繰り返しています。各カードには画像をサーバーに送信するフォーム送信ボタンがあります。フォームはカードごとにOKを送信します。私の問題は、カードの送信ボタンはデフォルトでは無効になっていて、ユーザーがアップロードする画像を選択するとボタンは無効にならなくなりました。

getInitialState: function() { 
    return{ 
    enableButton: "disabled button", 
    isFile: false 
    } 
}, 

fileInput(e){ 
    e.preventDefault(); 
    this.setState({isFile: true}); 
    this.setState({enableButton: "button"}); 
}, 

renderedCards(){ 
var cards = this.props.data.map((q, i) => { 
var enableButton = this.state.enableButton; 
var url = "SOME_URL"; 

<form action={url} 
    id="new_quote_milestone" 
    className="new_quote_milestone" 
    encType="multipart/form-data" 
    method="post"> 

    <input type="file" name="some_name]" id="some_id" onChange={this.fileInput}/> 

    <span><input className={enableButton} value="Upload image" type="submit" /></span> 
</form> 

}); 
return(
    <div>{cards}</div> 
) 
}, 

render(){ 
    return(
    <div>{this.renderedCards() ? this.renderedCards() : <Loader />}</div> 
    ) 
} 

は今、私はすべてのボタンを無効にしていると私はアップロードする画像を選択すると、すべてが有効になっているボタンを提出：私はこの反応使用しています。私はそれを望んでいない。画像を選択した状態で、カードのみを取得するには、ボタンを押して有効にしますか？

Answer 1

最も良い方法は、コンポーネントを2つに分割することです。

var Cards = React.createClass({ 
    renderedCards() { 
     var cards = this.props.data.map((q, i) => { 
      return <Card /> 
     }); 

     return (
      <div>{cards}</div> 
     ) 
    }, 

    render() { 
     return (
      <div>{this.renderedCards()}</div> 
     ) 
    } 
}); 

var Card = React.createClass({ 
    getInitialState: function() { 
     return { 
      enableButton: "disabled button", 
      isFile: false 
     } 
    }, 

    fileInput(e) { 
     e.preventDefault(); 
     this.setState({isFile: true}); 
     this.setState({enableButton: "button"}); 
    }, 

    render() { 
     var enableButton = this.state.enableButton; 
     var url = "SOME_URL"; 

     return <form action={url} 
      id="new_quote_milestone" 
      className="new_quote_milestone" 
      encType="multipart/form-data" 
      method="post" 
     > 
      <input type="file" name="some_name]" id="some_id" onChange={this.fileInput}/> 
      <span><input className={enableButton} value="Upload image" type="submit" /></span> 
     </form> 
    }, 
}); 

Example

またはファイルを持っているフォームの状態インデックスに保存することができます。そして、各フォームには、自分の状態を持っているだろう。