Javascript 使用React（Rails 5.1）处理表单中的单选按钮

我很难理解如何处理表单中的单选按钮以及React中的其他类型的输入。我正在使用一个示例，其中包含字符串类型的输入字段和另一个纯单选按钮，但不确定如何让它们配合得很好。文本字段输入工作正常，但我无法使单选按钮功能正常工作

此表单React部分单选按钮背后的基本原理是，当用户单击按钮时，每个选项的复选框都会设置，并且该特定按钮的选中值通过逻辑检查设置为true，而其他单选按钮则设置为false

我不知道如何将输入字段的处理与单选按钮结合起来

任何关于这方面的指导都会很好

这是我的jsx表格：

class Project_form extends React.Component {

handleChange(e) {
    const name = e.target.name;
    const obj = {};
    obj[name] = e.target.value;
    this.props.onUserInput(obj);
}

handleOptionChange(e) {
    const name = e.target.id;
    const obj = {};
    obj[name] = e.target.checked;
    this.props.onChangeInput(obj);
}

handleSubmit(e) {
    e.preventDefault();
    this.props.onFormSubmit();
}

render() {

    return (

        <form onSubmit={(event) => this.handleSubmit(event)} >

              <div className="form-group">
                <input 
                    id="project_name" 
                    className="form-control"                       
                    type="text" 
                    name="project_name" 
                    placeholder="Enter Your Project Name"
                    value={this.props.project_name}
                    onChange={(event) => this.handleChange(event)} />
              </div>

              <div className="form-group">
                <input 
                    id="project_zipcode" 
                    className="form-control" 
                    type="text" 
                    name="project_zipcode" 
                    placeholder="Zipcode"
                    value={this.props.project_zipcode}
                    onChange={(event) => this.handleChange(event)}  />
              </div>

                <div className="form-group">
                  <label>How Soon Do You Want this Project Started?</label>
                    <div className="radio">

                      <p><input type="radio" 
                        value="1-2 Weeks" 
                        name="project_timeframe" 
                        id="project_timeframe_1-2_weeks"
                        checked={this.props.project_timeframe === 'ASAP'} 
                        onChange={(event) => this.handleOptionChange(event)}  />
                      <label>As Soon As Possible</label></p>

                      <p><input type="radio" 
                        value="2-4 Weeks" 
                        name="project_timeframe" 
                        id="project_timeframe_2-4_weeks"
                        checked={this.props.project_timeframe === '2-4 Weeks'} 
                        onChange={(event) => this.handleOptionChange(event)} />
                      <label>2-4 Weeks</label></p>

                      <p><input type="radio" 
                        value="4-6 Weeks" 
                        name="project_timeframe" 
                        id="project_timeframe_4-6_weeks"
                        checked={this.props.project_timeframe === '4-6 Weeks'} 
                        onChange={(event) => this.handleOptionChange(event)} />
                      <label>4-6 Weeks</label></p>

                     <p><input type="radio" 
                        value="More Than 6 Weeks" 
                        name="project_timeframe" 
                        id="project_timeframe_more_than_6_weeks"
                        checked={this.props.project_timeframe === 'More Than 6 Weeks'} 
                        onChange={(event) => this.handleOptionChange(event)} />
                      <label>More Than 6 Weeks</label></p>

                    </div> 
                </div>

             <div className="form-group">
                <input 
                    type="submit"                       
                    value="Create Project" 
                    className="btn btn-primary btn-lg" 
                     />
             </div>
        </form>
        )
}
}

class项目\u表单扩展了React.Component{
手变（e）{
const name=e.target.name；
常量obj={}；
obj[name]=e.target.value；
此.props.onUserInput（obj）；
}
手持式变更（e）{
const name=e.target.id；
常量obj={}；
obj[name]=e.target.checked；
this.props.onChangeInput（obj）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.onFormSubmit（）；
}
render（）{
返回(
this.handleSubmit（event）}>
this.handleChange（event）}/>
this.handleChange（event）}/>
你希望这个项目多久开始？
this.handleOptionChange（事件）}/>
尽快

this.handleOptionChange（事件）}/>
2-4周

this.handleOptionChange（事件）}/>
4-6周

this.handleOptionChange（事件）}/>
超过6周

)
}
}

这是我的主要组件，它设置应用程序的状态

class Projects extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        projects: this.props.projects,
        project_name: '',
        project_zipcode: '',
        selectedTimeframeOption: 'ASAP'
    } 
}

handleUserInput(obj) {
    this.setState(obj);
}

handleChangeInput(obj) {
    this.setState({
    selectedOption: obj.target.value
  });
}

handleFormSubmit() {
    const project = {
        name: this.state.project_name, 
        zipcode: this.state.project_zipcode, 
        timeframe: this.state.project_timeframe
    };
    $.post('/projects',
        {project: project})
        .done((data) => {
            this.addNewProject(data);
        });
}

addNewProject(project){
    const projects = update(this.state.projects, { $push: [project]});
    this.setState({
        projects: projects.sort(function(a,b){
            return new Date(a['updated_at']) - new Date(b['updated_at']);
        })
    });
}

render() {
    return (

        <div>
           <h2>Start a New Project</h2>
                <a  href="/projects/new/" 
                    className="btn btn-large btn-success">Create a New Project</a>
                {/* <%= link_to "Create a New Project", new_project_path, class: "btn btn-large btn-success" %> */}

                    <Project_form 
                        project_name={this.state.project_name} 
                        project_zipcode={this.state.project_zipcode} 
                        project_timeframe={this.state.selectedTimeframeOption}
                        onUserInput={(obj) => this.handleUserInput(obj)}
                        onFormSubmit={() => this.handleFormSubmit()} />

                {/* <% if @current_user.projects.any? %> */}                    
                <div className="col-md-12">
                    <h3>Existing Projects</h3>
                    <div className="table-responsive">
                      <Project_list projects={this.state.projects} />
                    </div>                              
                </div>                  
        </div>

        )
}
}

类项目扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
项目：this.props.projects，
项目名称：“”，
项目代码：“”，
selectedTimeframeOption:“尽快”
} 
}
手动输入（obj）{
此设置状态（obj）；
}
handleChangeInput（obj）{
这是我的国家({
已选择选项：obj.target.value
});
}
handleFormSubmit（）{
const项目={
名称：this.state.project_name，
zipcode:this.state.project_zipcode，
时间范围：this.state.project\u时间范围
};
$.post（“/projects”，
{project:project}）
.完成（（数据）=>{
此.addNewProject（数据）；
});
}
addNewProject（项目）{
const projects=update（this.state.projects，{$push:[project]}）；
这是我的国家({
项目：项目。排序（函数（a，b）{
返回新日期（a['updated_at']）-新日期（b['updated_at']）；
})
});
}
render（）{
返回(
启动新项目
{/*  */}
这个.handleUserInput（obj）}
onFormSubmit={（）=>this.handleFormSubmit（）}/>
{/*  */}                    
现有项目
)
}
}

好的，算了。必须将事件对象放入有状态组件中

我的表单文件现在添加了以下事件处理程序：

handleOptionChange(e) {
    const option = e.target.name;
    const obj = {};
    obj[option] = e.target.value;
    this.props.onUserInput(obj);

}

然后这个.props.onUserInput（obj）；由Project.jsx文件中的现有方法调用，我去掉了handleChangeInput方法

handleUserInput(obj) {
    this.setState(obj);
}

然后，状态流到项目表单组件，如下所示：

<Project_form 
        project_name={this.state.project_name} 
        project_zipcode={this.state.project_zipcode} 
        project_timeframe={this.state.project_timeframe}
        onUserInput={(obj) => this.handleUserInput(obj)}
        onFormSubmit={() => this.handleFormSubmit()} />

this.handleUserInput（obj）}
onFormSubmit={（）=>this.handleFormSubmit（）}/>

您能否将您的jsx代码+HTML结构复制/粘贴到草稿中，以便我们了解您想要实现的目标？