Aktivieren Sie nur eine Übergabeschaltfläche in einer Iteration

Question

Wie aktivieren Sie nur eine Formularübergabeschaltfläche, wenn ein Dateiuploadbild erkannt wird?

Ich wiederhole über ein Modell, das eine Karte zurückgibt. Jede Karte hat einen Formular-Senden-Button, der ein Bild an den Server sendet. Das Formular reicht für jede Karte ein. Mein Problem ist, dass der Senden-Button einer Karte standardmäßig deaktiviert ist und sobald der Benutzer ein Bild zum Hochladen auswählt, ist die Schaltfläche nicht mehr deaktiviert. Ich verwende für diese Reaktion:

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

Jetzt habe ich alle Tasten deaktiviert und wenn ich ein Bild auswählen, hochladen, alle einreichen Tasten aktiviert sind. Ich will das nicht. Wie bekomme ich nur die Karte, mit dem Bild ausgewählt, übermittle Taste zum aktivieren?

Answer 1

Der beste Weg ist mit der Komponente in zwei geteilt.

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

Oder Sie können in Zustandsindizes der Form, die Datei gespeichert werden: Dann wird jede Form einen eigenen Staat haben werden.