ReactJS:当触发 onChange 时,我如何知道从组件自动传递了哪些参数?
ReactJS: how can I know what parameters are passed automatically from a component when onChange is triggered?
这可能是一个非常新手的问题,但我不知道如何知道将哪些参数传递给函数。让我告诉你我的意思:
我的构造函数中有以下代码:
this.handleFormInput = this.handleFormInput.bind(this);
然后:
handleFormInput(event) {
console.log('event' + event.target.name);
this.setState({
[event.target.name]: event.target.value
})
}
最后是表格:
<Form>
<Form.Group>
<Form.Field style={{width: '90%'}}>
<input placeholder='Section title'
id={section.id}
name='title'
value={section.title}
onChange={this.handleInput}
/>
</Form.Field>
</Form.Group>
</Form>
到目前为止一切顺利:事件参数是自动传递的,我可以通过将它作为参数添加到我的函数中来实现它。
现在我有了一个下拉组件。在构造函数中我有:
this.handleDropDownInput = this.handleDropDownInput.bind(this);
函数:
handleDropDownInput(event, data) {
console.log('value ' + data.value);
this.setState({
[data.name]: data.value
})
}
然后 semantic-ui
下拉列表:
<Dropdown
fluid
placeholder='Language'
search
selection
options={languages}
defaultValue='gb'
name='language'
onChange={this.handleDropDownInput}
/>
为什么我必须使用 'data' 参数来获取 Dropdown 组件上的值? 为什么我不能只使用事件?如何知道触发onChange时自动传递了哪些参数?
为不同的输入组件(下拉菜单、表单字段等)设置不同的功能是否合适?我可以而且应该创建一个功能来管理所有用户输入吗?
例如,我想出了这个函数来处理下拉列表和表单字段的 onChange 事件:
handleInput(event, data) {
if (data !== undefined) {
console.log('value ' + data.value);
this.setState({
[data.name]: data.value
})
} else {
console.log('event ' + event.target.name);
this.setState({
[event.target.name]: event.target.value
})
}
这是好事还是坏事?谢谢。
在 javascript 中,您可以通过多种方式获取所有参数,具体取决于您的环境。
在 pre-es6 javascript(pre "strict mode," 这是 es6 模块默认的)有一个动态变量叫做 "arguments." 你可以在这里看到它的引用:mdn
在较新的 es6 风格环境中,您可以使用所谓的 "rest parameter syntax" 来获得类似的东西,这将是一个参数数组。 mdn
一般来说,该信息应该在您正在使用的库或 React 组件的文档中。
function someFn(...args) {
console.log(args)
}
someFn("hey", "there");
这可能是一个非常新手的问题,但我不知道如何知道将哪些参数传递给函数。让我告诉你我的意思:
我的构造函数中有以下代码:
this.handleFormInput = this.handleFormInput.bind(this);
然后:
handleFormInput(event) {
console.log('event' + event.target.name);
this.setState({
[event.target.name]: event.target.value
})
}
最后是表格:
<Form>
<Form.Group>
<Form.Field style={{width: '90%'}}>
<input placeholder='Section title'
id={section.id}
name='title'
value={section.title}
onChange={this.handleInput}
/>
</Form.Field>
</Form.Group>
</Form>
到目前为止一切顺利:事件参数是自动传递的,我可以通过将它作为参数添加到我的函数中来实现它。
现在我有了一个下拉组件。在构造函数中我有:
this.handleDropDownInput = this.handleDropDownInput.bind(this);
函数:
handleDropDownInput(event, data) {
console.log('value ' + data.value);
this.setState({
[data.name]: data.value
})
}
然后 semantic-ui
下拉列表:
<Dropdown
fluid
placeholder='Language'
search
selection
options={languages}
defaultValue='gb'
name='language'
onChange={this.handleDropDownInput}
/>
为什么我必须使用 'data' 参数来获取 Dropdown 组件上的值? 为什么我不能只使用事件?如何知道触发onChange时自动传递了哪些参数?
为不同的输入组件(下拉菜单、表单字段等)设置不同的功能是否合适?我可以而且应该创建一个功能来管理所有用户输入吗?
例如,我想出了这个函数来处理下拉列表和表单字段的 onChange 事件:
handleInput(event, data) {
if (data !== undefined) {
console.log('value ' + data.value);
this.setState({
[data.name]: data.value
})
} else {
console.log('event ' + event.target.name);
this.setState({
[event.target.name]: event.target.value
})
}
这是好事还是坏事?谢谢。
在 javascript 中,您可以通过多种方式获取所有参数,具体取决于您的环境。
在 pre-es6 javascript(pre "strict mode," 这是 es6 模块默认的)有一个动态变量叫做 "arguments." 你可以在这里看到它的引用:mdn
在较新的 es6 风格环境中,您可以使用所谓的 "rest parameter syntax" 来获得类似的东西,这将是一个参数数组。 mdn
一般来说,该信息应该在您正在使用的库或 React 组件的文档中。
function someFn(...args) {
console.log(args)
}
someFn("hey", "there");