Question

我无法更改onSubmit的输入值，请你帮助我。

*https://jsfiddle.net/ishimdar/jx774dm3/*

Answer 1

您可以使用对输入字段的引用并更改其值。在这个例子中，我标记了第一个输入，但你可以用其他方式标记。 Refs将保留您对元素的所有引用，以便您可以通过引用名称访问它们。

class TodoApp extends React.Component {
   constructor(props){
            super(props);
            this.state = {
                width: '',
                height: '',
                background: '',
            };
            this.handleSubmit = this.handleSubmit.bind(this);
            this.handleChange = this.handleChange.bind(this);
        }

        handleChange(event){
            this.setState({
                [event.target.name]: event.target.value
            });
        }

        handleSubmit(event){

            this.refs.a.value = "New value"; // change value of input field
            event.preventDefault();

        }

        render(){
            var changeDiv = (
                    <div style={this.state}>
                        width: {this.state.width}
                        height: {this.state.height}
                        bg: {this.state.background}
                    </div>
            );
            return(
                    <div className="parentDiv">
                        <form onSubmit={this.handleSubmit}>
                            <div>
                                Set height<br/>
                                <input type="text" ref='a' name="width" value={this.state.width} onChange={this.handleChange} />
                            </div>
                            <div>
                                Set width<br/>
                                <input type="text" name="height" value={this.state.height} onChange={this.handleChange} />
                            </div>
                            <div>
                                Set background<br/>
                                <input type="text" name="background" value={this.state.background} onChange={this.handleChange} />
                            </div>
                            <div>
                                <input type="submit" value="Change div" />
                            </div>
                        </form>
                        {changeDiv}
                    </div>
            );
        }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

如何在onSubmit事件之后更改输入值而不是onChange？

1 个答案: