Question

我正在尝试在组件初始化时将重点放在表行上，并且在使用import React from 'react'; import { View, StyleSheet } from 'react-native'; import MultiSelect from 'react-native-multiple-select'; export default class App extends React.Component { // declaring state like this is absolutely fine, it doesn't need to be in a constructor state = { LangPickerValueHolder: [], LangKnown: [] } componentDidMount () { fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(response => response.json()) .then(responseJson => { let langString = responseJson.MFBasic.Languages; let langArray = langString.split(','); let LangPickerValueHolder = langArray.map((name, id) => { return { name, id }; }); this.setState({ LangPickerValueHolder }); console.log(langArray); }).catch(error => { console.error(error); }); } render () { return ( <View style={styles.container}> <MultiSelect ref={(component) => { this.multiSelect = component; }} onSelectedItemsChange={(value) => this.setState({ LangKnown: value }) } uniqueKey="id" // <- set the value for the uniqueKey items={this.state.LangPickerValueHolder} // <- set the items you wish to show selectedItems={this.state.LangKnown} onChangeInput={ (text) => console.log(text)} displayKey = 'name' . // <- fix typo here submitButtonText="Submit" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: 'white', padding: 8 } });时得到空值

interop

互操作

<table  class='table'>
     <thead>
         <tr>value</tr>
    </thead>
     <tbody>          
        @foreach (var elem in this.data) {
           <tr id="@elem.toString()"><td>@elem</td></tr>
     </tbody>
 </table>


@functions()
{
     protected int []data=new int[]{1,2,3,34};
     protected override async Task OnInitAsync() {
                if (data.Length > 0) {
                    var elementName= data.First().ToString();
                    await JSRuntime.Current.InvokeAsync<string>("methods.focus", elementName);;
                }
            }

}

PS 在浏览器中进行调试时，我在window.methods={ focus: function (elementName) { //i get the right id var element = document.getElementById(elementName);//returns null element.focus(); } }方法中获得了正确的elementName，但是focus返回了null元素。我是否需要先获取表格元素，然后在其中搜索行？

Answer 1

您不能将焦点设置在td或tr元素上。但是，您可以将输入元素放置在td元素内，然后设置焦点。

希望这对您有帮助...

无法将焦点放在表格行上

1 个答案: