Question

有一个简单的音乐应用程序，我正在制作。我有7＆＃34;广播电台＆＃34;按钮设置为以7种不同的方式更新相同的元素。我想更新mp3文件路径（src属性），歌曲名称，艺术家姓名以及电台名称。

这是我在jQuery代码中看起来的一个例子......

$('.deg295').click(function () { //One of the buttons

$('audio source').attr('src', 'music/panda.mp3'); //The mp3 filepath

$('.labels p:nth-child(1) em').text("Urban Beach Radio") //The station name

$('.labels p:nth-child(2)').text("PANDA"); //The song name

$('.labels p:last-child').text("Desiigner"); // The artist name

radio.load();
radio.play();
});

与此同时，这是有问题的组成部分......

var React = require('react');

let rock = require('../images/pngs/rock.png');
let none = require('../images/pngs/none.png');
let blue = require('../images/pngs/blue.png');
let flash = require('../images/pngs/flash.png');
let estim = require('../images/pngs/estim.png');
let urban = require('../images/pngs/urban.png');
let intl = require('../images/pngs/intl.png');

//The radioClass prop == "radio"
export default class Radio extends React.Component {

   render() {
      return (
     <section className={this.props.radioClass}> 

     <div className="septagon">

         //These are the 3 labels I want to update onClick
        <div className="labels">
           <p>
              <em></em>
           </p>
           <p>Radio</p>
           <p>Off</p>
        </div>
        //The 7 buttons are below
        <span className="deg40"><img src={rock} alt="" /></span>
        <span className="deg90"><img src={none} alt="" /></span>
        <span className="deg140"><img src={blue} alt="" /></span>
        <span className="deg195"><img src={flash} alt="" /></span>
        <span className="deg245"><img src={estim} alt="" /></span>
        <span className="deg295"><img src={urban} alt="" /></span>
        <span className="deg345"><img src={intl} alt="" /></span>

        //The audio element with the mp3 filepath that I also want to update
        <audio id="playmusic" preload="none">
           <source type="audio/mpeg" src="" id="audio"/>
        </audio>
     </div>
  </section>
  )

Answer 1

下面是一个小模拟代码，也许它可以帮助你。

export default class Radio extends React.Component {

  constructor() {
    // initializing the current selection with empty object.
    this.state = {
      current_selection: {}
    };
  }

  handleChangeSelection(selection) {
    // update the state with new data,
    // so that react will see state change and re-render component
    this.setState({
      current_selection: selection
    })
  }

  render() {
    return (
      <section className={this.props.radioClass}>

        {/* //The 7 buttons are below */}
        <span 
          className="deg40" 
          onClick={() => handleChangeSelection({
            // deg40 related data
            src: 'music/panda.mp3',
            song_name: 'PANDA',
            station_name: 'Urban Beach Radio',
            artist_name: 'Desiigner'
          })}
        >
          <img src={rock} alt="" />
        </span>

        {/* 
          use this.state.current_selection where ever you want to,
          and it will be updated automatically upon triggering `handleChangeSelection`, 
        */}
        <label>Song Name: {this.state.current_selection.song_name}</label>
        <label>Station Name: {this.state.current_selection.station_name}</label>
        <label>Artist Name: {this.state.current_selection.artist_name}</label>
        <audio id="playmusic" preload="none">
          <source type="audio/mpeg" src={this.state.current_selection.src} id="audio"/>
        </audio>

      </section>
    )
  }


}

这是你应该遵循的设计。

将current selection保存在组件的状态中，并在以后使用新选择的数据进行更新时使用它（我猜你的情况为<audio>）。

现在要在多个事件上更改它（在你的情况下点击各种按钮）你必须创建一个单独的函数，它将使用新数据更新状态（你必须从事件的原点传递新数据，在你调用这个函数的地方）并且在改变状态时，react会自动重新渲染组件。

使用React，如何使用不同的值更新多个元素？

1 个答案: