Javascript 用同级组件的元素绑定控件

我有一个名为images的数组，我将它们映射以显示图像。我放了一个按钮来更改它们，但我不知道如何将它们分开来更改正确的图像。它的工作原理就像更改每个库阵列的最后一个索引。例如，如果gallery有4个元素，则只更改第四个元素！ 我猜可能是因为参考文献是一样的。。。 我在用redux 谢谢

---

尽管在没有其他解决方案出现的时候使用REF可能很有诱惑力，但您的特定场景应该是REF的合适用例

只要您的映像和控件触发同一父组件内锁定的某些操作，以便仅在该组件的本地状态内操作映像，您甚至可能不需要涉及全局状态来绑定这两者

只需将某个图像锚定其id或名称作为属性传递给相应的控制按钮、复选框等，以便在必要的事件发生时触发对所需图像的操作

请参见以下实时片段作为概念证明：

//先决条件 const{render}=ReactDOM， {useState}=React， {createStore}=Redux， {connect，Provider}=ReactRedux //模拟存储在全局状态中的图像src数据， //设置虚拟减速器和存储 const initialState={imgData:[{name:'Lion'，imgSrc:'https://images.theconversation.com/files/243439/original/file-20181101-83635-1xcrr39.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip'}，{name:'Zebra'，imgSrc:'https://img3.akspic.ru/fit/95583-ekosistema-griva-zebra-pastbishhe-zoopark-x750.jpg'},{名称：'Monkey'，imgSrc:'https://img.jakpost.net/c/2017/09/12/2017_09_12_32421_1505189647._large.jpg'}]}, Appeducer=state=initialState，action=>state， store=createStoreappReducer //图像用户界面组件 const Image={imageSource，status}=> //父组件 常量ImgGallery={images}=>{ const[imagesStatus，setImagesStatus]=useStateMages.reduceres，{name}=>res[name]='visible'，res，{}， onToggleStatus=animalName=>setImagesStatus{…imagesStatus[animalName]：imagesStatus[animalName]=='visible'？'hidden'：'visible'} 回来 {images.map{imgSrc，name}，key=>} {images.map{name}，key=>隐藏{name}ontoglestatuse.target.value}/>} } //使用“连接”将全局状态imgData附加到图像属性 const mapStateToProps={imgData}=>{images:imgData}， ImgGalleryContainer=ConnectMapStateTopsIMGGallery //在提供程序内呈现父组件 提供

---

请提供样品沙盒。你会接受在投票分数下面打勾，因为它似乎能彻底解决你的问题吗？

class ImagesInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: "",
      currentImgPrev: []
    };

    this.inputFileChanged = this.inputFileChanged.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    let input = this.refs.input_reader;
    input.click();
  }

  inputFileChanged(e, index) {
      let file = e.target.files[0],
        reader = new FileReader(),
        self = this;
      reader.onload = function(r) {
        let img = self.state.currentImgPrev;
        const w = r.target.result;
        img[index] = w
        self.setState({
          currentImgPrev: img
        });
      };
      reader.readAsDataURL(file);
      self.setState({ val: reader });
      console.log(self.state.val);
  }

  render() {
    return (
            {this.props.gallery.map((g, index) => (
              <Col xs={4} className="text-center" key={index}>
                <img src={g} alt="landpic" />
                <Button
                  htmlFor={g}
                  onClick={this.handleClick}
                >
                  Change
                </Button>
                <input
                  type="file"
                  id={g}
                  style={{ display: "none" }}
                  ref="input_reader"
                  onChange={e => {
                    this.inputFileChanged(e, index);
                    this.props.handleSubmit(
                      this.state.currentImgPrev[index],
                      index,
                      this.props.name,
                    );
                  }}
                />
              </Col>
            ))}
    );
  }
};

const mapDispatchToProps = dispatch => {
  return {
    handleSubmit: (currentImgPrev, i, frameName) => {
      dispatch({
        type: "ADD_IMAGE",
        addedImg: currentImgPrev,
        indexEl: i,
        frameElName: frameName,
      });
    }
  };
};
export default connect(null, mapDispatchToProps)(ImagesInput);