使用React处理表单中的单选按钮(Rails 5.1)

Question

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

此表单React部分的单选按钮背后的基本理论是，当用户单击按钮时，将设置每个选项的复选框，并且通过逻辑检查将该特定按钮的checked值设置为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 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>

        )
}
}

Answer 1

好了，我想通了。我不得不把事件对象放到有状态组件中。

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

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

}

然后，Project.jsx文件中的现有方法调用this.props.onUserInput(obj)；，我去掉了handleChangeInput方法。

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

然后，状态向下传递到Project_form组件：

<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()} />