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