Question

在检测到文件上传图像时，如何仅启用一个表单提交按钮？

我正在迭代一个返回卡片的模型。每张卡都有一个表单提交按钮，用于将图像提交给服务器。表单为每张卡提交了ok。我的问题是，默认情况下会禁用卡片的提交按钮，一旦用户选择要上传的图像，该按钮就不再被禁用。我正在使用React：

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

最好的方法是将组件拆分为两个。然后每个表单都有自己的状态：

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

或者您可以存储在具有文件的表单的状态索引中。

在迭代中仅启用一个提交按钮

1 个答案: