Question

这是我的输入内容：

这是我的事件处理程序：

1..9

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

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

10..12

事件处理程序：

13..30

我想知道为什么会这样。

Answer 1

也许您的代码中有很多问题...

如果要更改输入的值，则需要一个属性值。我按如下所示重写代码，当我单击按钮时，值会更改。

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>
        );
    }
}

您需要知道什么是controlled-components。在您的示例中，您只是更改了输入的值，但是忘记了通过调用this.setState（）刷新视图。也许这就是为什么输入值没有改变的原因。

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

Answer 2

像这样的接缝是滥用反应的一个很好的例子；）（真实）DOM中的直接更改很慢-您正在执行3个操作，并（通过setState进行渲染）将其破坏。

为什么不通过每个大理石状态作为prop（无状态功能组件）？

const Marble = (props) => {
    const selected = !!props.isSelected
    const params = {
        style: { width: '33%' },
        onClick: e => props.handleClick(e, props.id)
    };
    params.className = selected ? 'pull-right btn btn-danger' : 'pull-right btn btn-info'

    // any kind of element input/button/div/span
    return (
        <div {...params } >
            {selected? 'Selected' : 'Unselected'}
        </div>
    );
}

用法（在父级中）……

<Marble id='someID' isSelected handleClick={this.handleButtonChange} />

selectedMarbles必须是数组吗？也许以id为键的对象？更容易检查状态

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

2 个答案: