Question

我对React很陌生。我正在尝试创建一个简单的表单并将值传递到“ onclick”处理程序中。您可以看到以下代码：

const reactContainer = document.getElementById('react');

let SForm = React.createClass({

    getApps: function(){
        getAppsExternal(document.getElementsByClassName("token")[0].value,document.getElementsByClassName("publisher_id")[0].value)
    },

    render: function(){
        return (
            React.createElement("div",{className: "container"},"",
                React.createElement("div",{},"Authentication Token: ","",
                    React.createElement("input",{type: "password",className:"token",maxLength:"30"})),
                React.createElement("div",{},"Publisher ID: ",
                    React.createElement("input",{type: "text",className:"publisher_id",maxLength:"7"})),
                React.createElement("button",{className:"get_apps_button",onClick:this.getApps},"Get Apps"))
            )
    }
})
let elementTester =React.createElement(SForm)
ReactDOM.render(React.createElement(SForm),reactContainer)

我的问题是，如何在不使用getAppsExternal的情况下以“反应”方式将参数传递到document.getElementsByClassName中？

Answer 1

请参阅：https://reactjs.org/docs/forwarding-refs.html

假设您使用的是最新的React，则可以使用React.createRef()

const reactContainer = document.getElementById('react');

let SForm = React.createClass({

    componentWillMount: function() {
      this.tokenRef = React.createRef()
      this.publisherRef = React.createRef()
    },

    getApps: function(){
        getAppsExternal(this.tokenRef.current.value, this.publisherRef.current.value)
    },

    render: function(){
        return (
            React.createElement("div",{className: "container"},"",
                React.createElement("div",{},"Authentication Token: ","",
                    React.createElement("input",{type: "password",className:"token",maxLength:"30", ref: this.tokenRef})),
                React.createElement("div",{},"Publisher ID: ",
                    React.createElement("input",{type: "text",className:"publisher_id",maxLength:"7", ref: this.publisherRef})),
                React.createElement("button",{className:"get_apps_button",onClick:this.getApps},"Get Apps"))
            )
    }
})
let elementTester =React.createElement(SForm)
ReactDOM.render(React.createElement(SForm),reactContainer)

如果您无法使用它，可以使用回调方法

const reactContainer = document.getElementById('react');

let SForm = React.createClass({
    setTokenRef: function(ref) {
      this.tokenRef = ref
    },

    setPublisherRef: function(ref) {
      this.publisherRef = ref
    },

    getApps: function(){
        getAppsExternal(this.tokenRef.value, this.publisherRef.value)
    },

    render: function(){
        return (
            React.createElement("div",{className: "container"},"",
                React.createElement("div",{},"Authentication Token: ","",
                    React.createElement("input",{type: "password",className:"token",maxLength:"30", ref: this.setTokenRef.bind(this)})),
                React.createElement("div",{},"Publisher ID: ",
                    React.createElement("input",{type: "text",className:"publisher_id",maxLength:"7", ref: this.setPublisherRef.bind(this)})),
                React.createElement("button",{className:"get_apps_button",onClick:this.getApps.bind(this)},"Get Apps"))
            )
    }
})
let elementTester =React.createElement(SForm)
ReactDOM.render(React.createElement(SForm),reactContainer)

由于您不使用箭头功能，因此请不要忘记像上面那样绑定回调

Answer 2

最简单的方法是，您可以创建一个getInitialState，然后创建一个onChange函数，该函数将值设置为状态，然后您就可以像这样{this.state.password}一样使用它们了： >

getInitialState: function() {
    return {password: '', publisher: ''};
  },
  onChange: function(e){
       this.setState({ [e.target.name]: e.target.value });
    },

  render: function(){
                     return (
                     React.createElement("div",{className: "container"},"",
                     React.createElement("div",{},"Authentication Token: {this.state.password}","",
                     React.createElement("input",{type: "password",className:"token",maxLength:"30",name: 'password',value: this.state.password,onChange: this.onChange.bind(this)})),
                     React.createElement("div",{},"Publisher ID: {this.state.publisher} ",
                     React.createElement("input",{name: 'publisher',type: "text",className:"publisher_id",maxLength:"7",value: this.state.publisher, onChange: this.onChange.bind(this)})),
                     React.createElement("button",{className:"get_apps_button",onClick:this.getApps},"Get Apps"))
                     )
                 }

将表单值传递给react.js中的onclick处理程序

2 个答案: