[英]How to display the state on the same page when clicked Submit button in react
[英](React) How to get the state of another component when a submit button is clicked?
我有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)。 我该怎么做呢? 我猜你需要做与道具相关的事情,但我在理解这些新概念时遇到了一些麻烦,因为我是新手。
您应该在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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.