(React) 單擊提交按鈕時如何獲取另一個組件的 state？

Question

我有3個文件，它們如下：

應用程序.js

import MP3Options from './mp3'
import SubmitButton from './submit'

class App extends React.Component {
  state = {codec: "MP3"};
  
  onCodecChange = (e) => {
    this.setState({codec: e.target.value})
  }

  submitClicked() {
    console.log('Submit button was clicked.')
  }

  renderComponent = () => {
    const { codec } = this.state;
    switch (codec) {
      case 'MP3':
        return  <MP3Options />
      default:
        return null;
    }
  }

  render() {
    return (
      // Codec options div.
      <div>
        <select id="codecs" onChange={this.onCodecChange} value={this.state.codec}>
          <option value="AAC">AAC (.m4a)</option>
          <option value="AC3">AC3 (Dolby Digital)</option>
          <option value="ALAC">ALAC</option>
          <option value="CAF">CAF (.caf)</option>
          <option value="DTS">DTS</option>
          <option value="FLAC">FLAC</option>
          <option value="MKA">MKA (extract audio without encoding it)</option>
          <option value="MKV">MKV (.mkv)</option>
          <option value="MP3">MP3</option>
          <option value="MP4">MP4 (.mp4)</option>
          <option value="Opus">Opus (.opus)</option>
          <option value="Vorbis">Vorbis (.ogg)</option>
          <option value="WAV">WAV</option>
        </select>
        {this.renderComponent()}
        <SubmitButton onSubmit={this.submitClicked} />
      </div>
    );
  }
}

mp3.js

import Mp3Cbr from './Mp3Cbr'
import Mp3Vbr from './Mp3Vbr'

class MP3Options extends React.Component {
    state = {mp3EncodingType: 'cbr'};

    onMp3EncodingTypeChange = event => {
        this.setState({mp3EncodingType: event.target.value});
    }

    renderComponent = () => {
        const { mp3EncodingType } = this.state
        switch (mp3EncodingType) {
            // Show the Mp3Cbr component if CBR or ABR is selected. Show the Mp3Vbr component if VBR is selected.
            case 'cbr':
            return <Mp3Cbr />;;
            case 'abr':
            return <Mp3Cbr />;
            case 'vbr':
            return <Mp3Vbr />;
            default:
            return null;
        }
    }

    render() {
        return (
        <div id="mp3_encoding_div">
            <label htmlFor="mp3_encoding_type">Encoding Type:</label>
            <select id="mp3_encoding_type" onChange={this.onMp3EncodingTypeChange} value={this.state.mp3EncodingType}>
                <option disabled value>Select encoding type</option>
                <option value="cbr">CBR (Constant Bitrate)</option>
                <option value="abr">ABR (Average Bitrate)</option>
                <option value="vbr">VBR (Variable Bitrate)</option>
            </select>
            {this.renderComponent()}
        </div>
        );
    }
}
    
export default MP3Options;

提交.js

class SubmitButton extends React.Component {

    submitClicked = () => {
        this.props.onSubmit();
    }

    render () {
        return (
        <button id="convert_btn" onClick={this.submitClicked}>Submit</button>
        )
    }
}
export default SubmitButton;

在 App.js 中，我能夠檢測到何時單擊提交按鈕（觸發了 submitClicked() function）。 我現在想要的是，在 App.js 中，我想獲取 mp3.js 中 JSX select 元素的值（即該值是 cbr、abr 還是 vbr）。 我該怎么做呢？ 我猜你需要做與道具相關的事情，但我在理解這些新概念時遇到了一些麻煩，因為我是新手。

Answer 1

您應該在App.js中管理 state 和Mp3Options組件的事件回調，並將它們作為道具傳遞給Mp3Options組件。 請在下面查看詳細信息。

應用程序.js

import React from 'react';
import MP3Options from './mp3';
import SubmitButton from './submit';

class App extends React.Component {
  state = { codec: 'MP3', mp3EncodingType: 'cbr' };

  onCodecChange = (e) => {
    this.setState({ codec: e.target.value });
  };

  onMp3EncodingTypeChange = (event) => {
    this.setState({ mp3EncodingType: event.target.value });
  };

  submitClicked = () => {
    console.log('Submit button was clicked.');
    console.log(this.state.mp3EncodingType);
  };

  renderComponent = () => {
    const { codec, mp3EncodingType } = this.state;
    switch (codec) {
      case 'MP3':
        return (
          <MP3Options
            mp3EncodingType={mp3EncodingType}
            onChange={this.onMp3EncodingTypeChange}
          />
        );
      default:
        return null;
    }
  };

  render() {
    return (
      // Codec options div.
      <div>
        <select
          id="codecs"
          onChange={this.onCodecChange}
          value={this.state.codec}
        >
          <option value="AAC">AAC (.m4a)</option>
          <option value="AC3">AC3 (Dolby Digital)</option>
          <option value="ALAC">ALAC</option>
          <option value="CAF">CAF (.caf)</option>
          <option value="DTS">DTS</option>
          <option value="FLAC">FLAC</option>
          <option value="MKA">MKA (extract audio without encoding it)</option>
          <option value="MKV">MKV (.mkv)</option>
          <option value="MP3">MP3</option>
          <option value="MP4">MP4 (.mp4)</option>
          <option value="Opus">Opus (.opus)</option>
          <option value="Vorbis">Vorbis (.ogg)</option>
          <option value="WAV">WAV</option>
        </select>
        {this.renderComponent()}
        <SubmitButton onSubmit={this.submitClicked} />
      </div>
    );
  }
}

export default App;

mp3.js

import React from 'react';
import Mp3Cbr from './Mp3Cbr';
import Mp3Vbr from './Mp3Vbr';

class MP3Options extends React.Component {
  renderComponent = () => {
    const { mp3EncodingType } = this.props;
    switch (mp3EncodingType) {
      // Show the Mp3Cbr component if CBR or ABR is selected. Show the Mp3Vbr component if VBR is selected.
      case 'cbr':
        return <Mp3Cbr />;
      case 'abr':
        return <Mp3Cbr />;
      case 'vbr':
        return <Mp3Vbr />;
      default:
        return null;
    }
  };

  render() {
    const { onChange } = this.props;
    return (
      <div id="mp3_encoding_div">
        <label htmlFor="mp3_encoding_type">Encoding Type:</label>
        <select id="mp3_encoding_type" onChange={onChange}>
          <option disabled value>
            Select encoding type
          </option>
          <option value="cbr">CBR (Constant Bitrate)</option>
          <option value="abr">ABR (Average Bitrate)</option>
          <option value="vbr">VBR (Variable Bitrate)</option>
        </select>
        {this.renderComponent()}
      </div>
    );
  }
}

export default MP3Options;