React在表單提交時獲取輸入值並顯示它

Question

我在以下位置有以下腳本： http : //codepen.io/AlexanderWeb00/pen/gLVbjL?editors=0010

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }
  handleFirstName(e) {
    this.setState({name: e.target.value});
  }
  render(){
    return (
      <section>
        <h2>welcome</h2>
        <TShirt name={this.state.name} />
        <FormButton action={this.handleFirstName.bind(this)} />
      </section>
    )
  }
};

class TShirt extends React.Component {
  render(){
    return (
      <section>
        <div>
          <p>Name: {this.props.name}</p>
        </div>
      </section>
    )
  }
};
class Extention extends React.Component {
  render(){
    return (
      <section>
        <div>
          <p>badaboom</p>
        </div>
      </section>
    )
  }
};
var FormButton = React.createClass({ 
    getInitialState: function() {
        return {'submitted': false};
    },

    handleSubmit: function(e) {
        e.preventDefault();
        this.setState({'submitted': true });
    },
    render: function() {
        if (this.state.submitted) {
            return <Extention/>;
        }
        else {
            return (
                <form role="form" onSubmit={this.handleSubmit}>
                    <input type="text" />
                    <input type="submit" value="submit" />
                </form> 
            );
        }
    }
}); 

ReactDOM.render(<Wrapper />, document.getElementById('app'));

我想顯示從輸入中收集的值

<input type="text" />

這里：

<p>Name: {this.props.name}</p>, inside the TShirt component.

提交表單后，目前僅顯示一個新組件。 當我構建應用程序時，Tshirt組件將被更新以包含更多內容。

Answer 1

您可以使用refs來獲取tshirt輸入字段的值，然后調用傳遞給動作道具中FormButton組件的回調函數。

var FormButton = React.createClass({ 
getInitialState: function() {
    return {'submitted': false};
},

handleSubmit: function(e) {
    e.preventDefault();
    var tshirt = this.refs.tshirt.value;
    this.setState({submitted: true }, function() {
      this.props.action(tshirt);
    });
},
render: function() {
    if (this.state.submitted) {
        return <Extention/>;
    }
    else {
        return (
            <form role="form" onSubmit={this.handleSubmit}>
                <input type="text" ref="tshirt" />
                <input type="submit" value="submit" />
            </form> 
        );
    }
}
});

然后將handleFirstName方法修改為此：

handleFirstName(tshirt) {
    this.setState({name: tshirt});
}