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

Question

我很难理解如何在 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 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);

}

然后 this.props.onUserInput(obj);被 Project.jsx 文件中的现有方法调用，我摆脱了 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()} />