Reactでフォームのラジオボタンを処理する（Rails 5.1）

Question

Reactで他のタイプの入力を持つフォームでラジオボタンを処理する方法を理解できない。私は文字列型の入力フィールドと純粋なラジオボタン用のものを組み込んだ例から作業していますが、一緒に素敵な演奏をする方法はわかりません。テキストフィールドの入力はうまくいきますが、ラジオボタン機能を使用することはできません。

このフォームのリアクション部分のラジオボタンの基本的な理論は、ユーザーがボタンをクリックしたときに各オプションのチェックボックスが設定され、その特定のボタンのチェック値がロジックチェック、他のラジオボタンは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()} />