相关疑难解决方法(0)

我正在制作一个表格,我需要收音机输入.如何在onSubmit函数中获取已检查的无线电输入,正确的方法是什么？

这是我的代码,我myRadioInput-variable在提交时包含选项A或选项B:

React.createClass({
    handleSubmit: function() {
        e.preventDefault();
        var myTextInput = this.refs.myTextInput.getDOMNode().value.trim();
        var myRadioInput = "How ?";
    },
    render: function() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" ref="myTextInput" />
                <label>
                    <span>Option A</span>
                    <input type="radio" name="myRadioInput" value="Option A"/>
                </label>
                <label>
                    <span>Option B</span>
                    <input type="radio" name="myRadioInput" value="Option B"/>
                </label>
                <input type="submit" value="Submit this"/>
            </form>
        )
    }
});

我正在关注React Tutorial,并坚持如何使用React.findDOMNode.

这是我的代码:

export class CommentForm extends React.Component<{}, {}> {
    handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        console.log(React.findDOMNode(this.refs['author']));
    }

    render() {
        return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }>
                 <input type="text" placeholder="Your name" ref="author" />
                 <input type="text" placeholder="Say something..." ref="text" />
                 <input type="submit" value="Post" />
               </form>;
    }
}

呼叫console.log(React.findDOMNode(this.refs['author']));让我回到<input type="text" data-reactid=".0.2.0" placeholder="Your name"> 控制台.但是,我无法弄清楚如何检索输入元素的值(我输入框中输入的内容).

到目前为止,我已经尝试了以下以及其他几个:

React.findDOMNode(this.refs['author']).value; // "value" does not exist on type "Element"
React.findDOMNode(this.refs['author']).getAttribute('value'); // null
React.findDOMNode(this.refs['author']).textContent; // null

在intellisense中我可以看到以下内容,但我仍然无法弄清楚在这里调用什么.

我正在使用DefinitedlyTyped中的类型定义.另外,我是前端开发的新手,所以也许我的方法是错误的.

我看到一个onChange监听器通常没有额外的参数e.

handleOnChange(e) {
   this.setState({email: e.target.value});
}

但是仍然可以通过额外的论点吗？像这样:

handleOnChange(e,key) {
   this.setState({[key]: e.target.value});
}

我修改了这个线程中的代码来做一个例子

class FormInput extends React.Component{

    consturctor(props){
       super(props);
       this.state = {email:false,password:false}
    }

    handleOnChange(e,key) {
       this.setState({[key]: e.target.value});
    }

    render() {
          return 
            <form>
              <input type="text" name="email" placeholder="Email" onChange={this.handleOnChange('email')} />
              <input type="password" name="password" placeholder="Password" onChange={this.handleOnChange('password')}/>
              <button type="button" onClick={this.handleLogin}>Zogin</button>
            </form>;
    }
}