1

私はreactjsが初めてです。入力フィールドの値を取得する方法がわかりません。コンポーネントのコーディング方法を示す最良の方法：

create class inputFields extends React.Component{ 
  getAllInformationAsJSON() {
    return {
        company : this.refs.company.getText(),
        street : this.refs.street.getText(),
        plz : this.refs.plz.getText(),
        city : this.refs.city.getText(),
        description : this.refs.description.getText(),

    }
}

render() {
    return (
        <div style={cssStyle.bodyStyle}>
            <FormComponentText ref="company"   placeholder= {Translation.Location.firmaPlaceholder}/>
            <FormComponentText ref="street" placeholder={Translation.Location.streetPlaceholder}/>
            <FormComponentText ref="plz" width='20%' placeholder={Translation.Location.PLZPlaceholder}/>
            <FormComponentText ref="city" width='80%' placeholder={Translation.Location.placePlaceholder}/>
            <FormComponentArea ref="description" rows='7' placeholder={Translation.Location.descriptionPlaceholder}/>
            <div><button onClick={this.getAllInformationAsJSON}>Test</button></div>
        </div >
    )
}
}

これを html ドキュメントでレンダリングすると、正常に動作します。

render(){
      return (<inputFields />)
}

関数を呼び出すと、すべての情報が取得されます。しかし、私はこのコンポーネントを他のコンポーネントに入れたい:

addChild(component) {

    viewTitle = Translation.Settings.User.title;
    viewConfig.view.window.width = 600;
    viewConfig.view.window.height = 400;
    *bodyInfo* = <**inputFields**  />;

    this.props.addComponentToView(<JSPanel idInfo="" config={viewConfig} title={viewTitle} bodyInfo={*bodyInfo*}/>);
}

JSPanel:

class JSPanel extends React.Component {

constructor(props) {
    super(props);
    this.sendInformation = this.sendInformation.bind(this);
}


sendInformation() {
    var test = findDOMNode("TEST");
    request("/componente/location", requestData.POST, '{info:test}', requestData.CONTENT_JSON)
        .then(token => {

        }).catch(err => console.log(err))
}


render() {
    return this.state.showImage ? (<div ref="ich" style={this.state.css.view}>
            <div style={this.state.css.body}>
                {this.props.**bodyInfo**}
            </div>
        </div>
    ) : (<div></div>)
}

私が欲しいのは、関数によって入力から情報を取得することです: sendInformation()

これが私が何を意味するのか明確であり、誰かが私を助けることができることを願っています?

よろしくお願いします

4

1 に答える 1

0

これを行う良い方法は、ユーザーが値を入力したときに値を状態に保存することです

于 2016-06-22T21:36:04.990 に答える