javascript - (React)点击提交按钮时如何获取另一个组件的状态?
问题描述
我有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() 函数)。我现在想要的是,在 App.js 中,我想获取 mp3.js 中 JSX 选择元素的值(即该值是 cbr、abr 还是 vbr)。我该怎么做呢?我猜你需要做与道具相关的事情,但我在理解这些新概念时遇到了一些麻烦,因为我是新手。
解决方案
Mp3Options
您应该在 中管理组件的状态和事件回调App.js
,并将它们作为 props 传递给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;
推荐阅读
- python - 如何检查文件是否已经在缓存中?
- intellij-idea - 在 intellij maven 运行配置中使用路径变量
- php - 运行 laradock 容器时未找到“SoapClient”类
- excel - 工作表名称崩溃宏
- php - 传递控制器以查看未定义变量时出现未定义变量错误:用户(查看:C:\xampp\htdocs\site\resources\views\edit.blade.php)
- python - 如何在传入格式未知的字符串中随机化数字?
- java - Java UserDefinedFileAttributeView 空
- javascript - 如何使用 onclick 隐藏同一类的所有 div?
- mongodb - 每个文档的 MongoDB 字段/键限制
- c# - aspnet core 3.1 中的 Linq groupby 无法处理 LINQ 表达式