onSelectイベントでローカル変数を設定する

Question

最終状態オブジェクトをサーバーに送信する前にローカル状態の変更をいくつか作成しようとしています。私はまず、reduxストアに提出されるtargetUserにユーザーを設定し、新しい役割を持つ返された更新されたユーザーはローカル状態で保持されます。ユーザーがターゲットユーザーになると、GradeSelectドロップダウンが表示され、ターゲットユーザーをグレーディングすることができます。グレードが選択されると、GradeSelectコンポーネントの送信ボタンでデータIDとして取得し、ローカル状態オブジェクトに追加しようとしています。そこから新しいユーザー情報（ターゲットユーザーとグレード）をサーバーに送信できます。

私は、onSelect関数を介してローカル変数（ 'let'で初期化）を設定するのは簡単だと思っていました。 は次のようになります。

handleGradeChange(e) { 
    const grade = e.target.dataset.id 
    console.log('NEW GRADE', grade) 
} 

GradeSelectは、オプションとして、これらを使用してこの周囲のコードによって包含される：：newGradeが設定されていない理由を私は把握するまで

const GradeSelect = (props) => { 
const { grades, userGrade, handleGradeChange } = props; 
let newGrade = '' 
const setGrade = (e) => newGrade = e.target.value; 
return (
    <div> 
    <select defaultValue={userGrade ? userGrade : "select"} onChange= 
    {setGrade}> 
    <option value="select" disabled>Select Grade</option> 
    { 
     grades.map(grade => 
     <option value={grade} key={grade}>{grade}</option> 
    ) 
    } 
    </select> 
    <Button 
    bsSize="xsmall" 
    bsStyle="success" 
    disabled={!newGrade.length} 
    id={newGrade} 
    onClick={handleGradeChange}> 
     submit 
    </Button> 
    </div> 
); 
}; 

export default GradeSelect; 

handleGradeChangeは、単にこれですオプションをしましょう= ["user"、 "targetUser"];私はそれがこの "の結合であるかもしれないが、「この」が大きなコンポーネントの一部であるGradeSelectに定義されていない...私は私の問題は、おそらくそこにあると仮定し、それはあると思った私の研究では

<td> 
    <select 
    onChange={handleRoleChange} 
    data-id={JSON.stringify(user)} 
    value={role} 
    > 
    <option value={role}>{role}</option> 
    { 
     role === options[0] ? 
     <option value={options[1]}>{options[1]}</option> : 
     <option value={options[0]}>{options[0]}</option> 
    } 
     </select> 
    { 
     role === options[1] ? 
     <GradeSelect 
     grades={grades} 
     handleGradeChange={handleGradeChange} 
     userGrade={userGrade} 
     /> : null 
     } 
    </td> 

私を超えて

ここでは、私が問題を示すcodePen（https://codepen.io/anon/pen/MrWXMo?editors=1111）を示します。インポートされたすべての小道具をローカルに作成しなければならなかった。私はこれが答えに影響しないことを願っています。しかし、問題はcodePenで同じです。

これはstackOverflowに関する私の最初の質問ですので、私が残したことを私に許してください（そして気をつけてください）。お時間を事前に

おかげ

Answer 1

これは、コンポーネントのローカル状態を使用して簡単な例です。

const grades = ['Nothing', 'A', 'B', 'C', 'D', 'E', 'F']; 

class GradeSelect extends React.Component { 
    state = { 
    selected: 'Nothing' 
    }; 

    onChange = (e) => { 
    this.setState({selected: e.target.value}); 
    } 

    onClick = (e) => { 
    console.log(`onClick selected was ${this.state.selected}`); 
    } 

    render() { 
    return (
     <div> 
     <select value={this.state.selected} onChange={this.onChange}> 
     { 
      grades.map(g => <option key={g}>{g}</option>) 
     } 
     </select> 
     <button 
      onClick={this.onClick} 
      disabled={this.state.selected === 'Nothing'} 
     > 
      submit 
     </button> 
     </div> 
    ); 
    }; 
} 

2つの通信コンポーネントを使用した例です。

const grades = ['Nothing', 'A', 'B', 'C', 'D', 'F']; 

class GradeSelect extends React.PureComponent { 
    static defaultProps = { 
    onChange:() => {}, 
    value: 'Nothing', 
    grades: [] 
    } 

    onChange = (e) => { 
    this.props.onChange(e.target.value); 
    } 

    render() { 
    return (
     <select value={this.props.value} onChange={this.onChange}> 
     {this.props.grades.map(g => <option key={g}>{g}</option>)} 
     </select> 
    ); 
    }; 
} 

class GradeDashboard extends React.Component { 
    state = { 
    gradeA: 'Nothing', 
    gradeB: 'Nothing' 
    } 

    onClick = (e) => { 
    console.log(`onClick selected was ${this.state.gradeA} and ${this.state.gradeB}`); 
    } 

    onGradeAChange = (grade) => { 
    this.setState({gradeA: grade}); 
    } 

    onGradeBChange = (grade) => { 
    this.setState({gradeB: grade}); 
    } 

    anyUnselected =() => { 
    return this.state.gradeA === 'Nothing' || 
      this.state.gradeB === 'Nothing'; 
    } 

    render() { 
    return (
     <div> 
     <GradeSelect grades={grades} value={this.state.gradeA} onChange={this.onGradeAChange} /> 
     <GradeSelect grades={grades} value={this.state.gradeB} onChange={this.onGradeBChange}/> 
     <button 
      onClick={this.onClick} 
      disabled={this.anyUnselected()} 
     > 
      submit 
     </button> 
     </div> 
    ); 
    } 
}