时间戳

首页 > 解决方案 > e.target.value 不适用于 React 输入类型 = 按钮

html - e.target.value 不适用于 React 输入类型 = 按钮

问题描述

这是我的输入：

<input type="button" className="pull-right btn btn-info" style={{width: "33%"}} onClick={this.handleButtonChange.bind(this, marble._id)}
                                                       value="Assign"/>

这是我的事件处理程序：

  handleButtonChange(marbleId, e) {
    var array = [...this.state.selectedMarbles]; // make a separate copy of the array
    var index = array.indexOf(marbleId);
      // append that element
    if(index<0) {
      array.push(marbleId);
      e.target.value="Unassign";
      e.target.classList.remove("btn-info");
      e.target.classList.add("btn-danger");
    } else {
      // remove that element
      array.splice(index, 1);
      e.target.value="Assign";
      e.target.classList.add("btn-info");
      e.target.classList.remove("btn-danger");
    }
    this.setState({selectedMarbles: array});
    e.preventDefault()
    e.stopPropagation();
  }

这会更改输入标签中的类，但不会更改值。

但是，如果我在上面更改为按钮标签，它会按预期工作。

<button type="button" className="pull-right btn btn-info" style={{width: "33%"}} onClick={this.handleButtonChange.bind(this, marble._id)}
                >Select</button>

事件处理程序：

  handleButtonChange(marbleId, e) {
    var array = [...this.state.selectedMarbles]; // make a separate copy of the array
    var index = array.indexOf(marbleId);
      // append that element
    if(index<0) {
      array.push(marbleId);
      e.target.innerHTML="Selected";
      e.target.classList.remove("btn-info");
      e.target.classList.add("btn-danger");
    } else {
      // remove that element
      array.splice(index, 1);
      e.target.innerHTML="Select";
      e.target.classList.add("btn-info");
      e.target.classList.remove("btn-danger");
    }
    this.setState({selectedMarbles: array});
    e.preventDefault();
    e.stopPropagation();
  }

我想知道为什么会这样。

标签： htmlreactjsreact-redux

解决方案

也许你的代码有很多问题......

  • 如果你想改变输入的值，你需要一个属性值。我像下面这样重写你的代码，当我点击按钮时，值就会改变。
export default class index extends Component {
    constructor (props) {
        super(props);

        this.state = {
            selectedMarbles: [],
            inputValue: 'Assign',
        };
    }

    handleButtonChange = (e, id) => {
        const { selectedMarbles } = this.state;
        let inputValue;

        let array = [...selectedMarbles]; // make a separate copy of the array
        let index = array.indexOf(id);
        // append that element

        if (index < 0) {
            array.push(id);
            //   e.target.value = 'Unassign';
            inputValue = 'Unassign';
            // e.target.classList.remove('btn-info');
            // e.target.classList.add('btn-danger');
        } else {
            // remove that element
            array.splice(index, 1);
            // e.target.value = 'Assign';
            inputValue = 'Unassign';
            // e.target.classList.add('btn-info');
            // e.target.classList.remove('btn-danger');
        }

        this.setState({ selectedMarbles: array, inputValue });

        e.preventDefault();
        e.stopPropagation();
    }

    render = () => {
        const { inputValue } = this.state;

        const params = {
            type: 'button',
            className: 'pull-right btn btn-info',
            style: { width: '33%' },
            onClick: e => this.handleButtonChange(e, 1),
            value: inputValue
        };

        return (
            <div className='index'>
                <input {...params } />
            </div>
        );
    }
}

您需要知道什么是受控组件。在您的示例中，您只需更改输入的值，但您忘记调用 this.setState() 来刷新视图。也许这就是为什么 input 的值没有改变的原因。

  • 在您的第二个示例中，为什么 button 的值会更改是您更改了它的 innerHTML。如果您在按钮中使用值，则该值可能也不会改变。

推荐阅读